/*=====================================================
                SMI CHESS ARENA
                PREMIUM UI - PART 2
======================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,Segoe UI,sans-serif;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#07111d;
    color:#fff;
}

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.05),
            transparent 70%
        );

}

/*================ BACKGROUND ================*/

body{
    background:
    radial-gradient(circle at top left,#16304f 0%,transparent 35%),
    radial-gradient(circle at bottom right,#122846 0%,transparent 30%),
    linear-gradient(135deg,#08121e,#111d2f,#07111d);
}

.background-glow{
    position:fixed;
    border-radius:50%;
    filter:blur(140px);
    opacity:.25;
    pointer-events:none;
    animation:floatGlow 8s ease-in-out infinite;
}

.glow1{
    width:420px;
    height:420px;
    background:#3ca7ff;
    left:-120px;
    top:-80px;
}

.glow2{
    width:500px;
    height:500px;
    background:#6b5cff;
    right:-180px;
    bottom:-150px;
    animation-delay:2s;
}

@keyframes floatGlow{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-40px);
}

100%{
transform:translateY(0px);
}

}

/*================ MAIN LAYOUT ================*/

.arena{

width:100%;
height:100vh;

display:flex;
flex-direction:column;

padding:18px;

gap:18px;

}

/*================ GLASS ================*/

.glass{

background:rgba(255,255,255,.06);

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

backdrop-filter:blur(24px);

border-radius:22px;

box-shadow:

0 15px 40px rgba(0,0,0,.45),

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

}

/*================ TOPBAR ================*/

.topbar{

height:72px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 28px;

border-radius:22px;

background:rgba(12,18,28,.85);

backdrop-filter:blur(25px);

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

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:18px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#ffffff;

}

.match-status{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:8px 16px;

    border-radius:12px;

    background:rgba(28,52,42,.25);

    border:1px solid rgba(84,255,143,.18);

    color:#67ff98;

    font-size:15px;

    font-weight:700;

    letter-spacing:.5px;

}

.live-dot{

width:12px;

height:12px;

background:#38ff73;

border-radius:50%;

box-shadow:0 0 18px #38ff73;

animation:pulse 1s infinite;

}

@keyframes pulse{

0%{
transform:scale(.9);
opacity:.5;
}

50%{
transform:scale(1.3);
opacity:1;
}

100%{
transform:scale(.9);
opacity:.5;
}

}

.room-id{

padding:10px 18px;

border-radius:12px;

background:#18283d;

font-weight:600;

}

/*================ MAIN ================*/

.main-layout{

flex:1;

display:grid;

grid-template-columns:300px 1fr 340px;

gap:20px;

overflow:hidden;

}

/*================ SIDE PANELS ================*/

.left-panel,
.right-panel{

padding:22px;

display:flex;

flex-direction:column;

gap:24px;

overflow:hidden;

}

.player-card{

text-align:center;

}

.player-card img{

width:120px;

height:120px;

border-radius:50%;

object-fit:cover;

border:5px solid rgba(255,255,255,.15);

box-shadow:0 0 35px rgba(70,160,255,.35);

margin-bottom:18px;

}

.player-card h2{

font-size:24px;

margin-bottom:8px;

}

.player-card p{

color:#8ea7c5;

margin-bottom:18px;

}

.clock{

font-size:34px;

font-weight:700;

background:#13253b;

padding:14px;

border-radius:18px;

letter-spacing:2px;

box-shadow:inset 0 0 18px rgba(0,0,0,.4);

}

/*================ CAPTURE BOX ================*/

.captured-box,
.moves-box{

flex:1;

display:flex;

flex-direction:column;

padding:20px;

border-radius:18px;

background:rgba(255,255,255,.04);

overflow:auto;

}

.captured-box h3,
.moves-box h3{

margin-bottom:18px;

font-size:20px;

}

/*================ CENTER ================*/

.center-panel{

display:flex;

align-items:center;

justify-content:center;

position:relative;

}

/*================ EVALUATION BAR ================*/

.evaluation{

position:absolute;

left:15px;

top:50%;

transform:translateY(-50%);

width:20px;

height:640px;

background:#111;

border-radius:30px;

overflow:hidden;

box-shadow:0 0 20px rgba(0,0,0,.5);

}

.eval-black{

height:50%;

background:#1d1d1d;

}

.eval-white{

height:50%;

background:#f4f4f4;

}

/*================ BOARD HOLDER ================*/

#boardWrapper{

width:720px;

height:720px;

border-radius:22px;

padding:18px;

background:

linear-gradient(145deg,#3b2916,#24170d);

box-shadow:

0 30px 70px rgba(0,0,0,.55),

0 0 50px rgba(60,140,255,.15);

display:flex;

align-items:center;

justify-content:center;

}

#chessBoard{

width:100%;

height:100%;

border-radius:12px;

background:#000;

}

/*================ FOOTER ================*/

.bottom-bar{

height:84px;

display:flex;

align-items:center;

justify-content:center;

gap:18px;

padding:0 20px;

}

.bottom-bar button{

padding:14px 26px;

border:none;

border-radius:14px;

background:#20406b;

color:white;

font-size:15px;

font-weight:600;

cursor:pointer;

transition:.25s;

}

.bottom-bar button:hover{

background:#2b66b7;

transform:translateY(-3px);

box-shadow:0 10px 20px rgba(0,0,0,.3);

}

/*================ RESPONSIVE ================*/

@media(max-width:1500px){

.main-layout{

grid-template-columns:260px 1fr 280px;

}

#boardWrapper{

width:620px;
height:620px;

}

.evaluation{

height:560px;

}

}

@media(max-width:1200px){

.main-layout{

grid-template-columns:1fr;

}

.left-panel,
.right-panel{

display:none;

}

.evaluation{

display:none;

}

#boardWrapper{

width:90vw;
height:90vw;
max-width:720px;
max-height:720px;

}

}

/*=====================================================
                PART 3A BOARD
======================================================*/

#chessBoard{

display:grid;

grid-template-columns:repeat(8,1fr);

grid-template-rows:repeat(8,1fr);

overflow:hidden;

border-radius:12px;

background:#000;

}

/*================ SQUARE ================*/

.square{

position:relative;

display:flex;

align-items:center;

justify-content:center;

transition:.18s;

cursor:pointer;

user-select:none;

}

/*================ COLORS ================*/

.light{

background:#f0d9b5;

}

.dark{

    background:
    linear-gradient(
        145deg,
        #6E8E53,
        #587642
    );

}

/*================ HOVER ================*/

.square:hover{

filter:brightness(1.08);

}

/*================ SELECTED ================*/

.selected{

box-shadow:

inset 0 0 0 5px #39b6ff,

0 0 18px rgba(60,180,255,.8);

z-index:5;

}

/*================ COORDINATES ================*/

.coord-file{

position:absolute;

right:5px;

bottom:3px;

font-size:11px;

font-weight:700;

opacity:.8;

color:#3d2a17;

}

.dark .coord-file{

color:#efe7da;

}

.coord-rank{

position:absolute;

left:5px;

top:3px;

font-size:11px;

font-weight:700;

opacity:.8;

color:#3d2a17;

}

.dark .coord-rank{

color:#efe7da;

}

/*=====================================================
            PREMIUM BOARD EFFECT
======================================================*/

#boardWrapper{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:
    linear-gradient(145deg,#6f4b24,#3d240f);

    padding:18px;

    box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.08),
    inset 0 15px 30px rgba(255,255,255,.08),
    inset 0 -20px 35px rgba(0,0,0,.45),
    0 25px 70px rgba(0,0,0,.65),
    0 0 60px rgba(95,170,255,.12);

}

/* wooden shine */

#boardWrapper::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    linear-gradient(
    130deg,
    rgba(255,255,255,.16),
    transparent 35%,
    transparent 65%,
    rgba(255,255,255,.08)
    );

}

/*================ SQUARES ================*/

.light{

    background:
        linear-gradient(
            145deg,
            #F8E8C9 0%,
            #F2DDB6 35%,
            #E8CB9A 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        inset 0 -1px 0 rgba(0,0,0,.06);

    transition:
        background .20s,
        filter .20s,
        transform .18s;

}

.dark{

    background:
        linear-gradient(
            145deg,
            #6E8E53 0%,
            #5E7D45 45%,
            #4E6C36 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,0,0,.18);

    transition:
        background .2s,
        filter .2s,
        transform .18s;

}

.square:hover{

    transform:scale(.98);

    filter:brightness(1.08);

}

/*================ BOARD GRID ================*/

.square{

    box-shadow:

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

}

/*================ PREMIUM SELECT ================*/

.selected{

    z-index:10;

    box-shadow:

    inset 0 0 0 4px #00c6ff,

    inset 0 0 18px rgba(0,198,255,.45),

    0 0 25px rgba(0,198,255,.7);

}

/*================ LEGAL MOVE ================*/

.legal{

    position:relative;

}

.legal::after{

    content:"";

    width:22px;

    height:22px;

    border-radius:50%;

    background:rgba(30,30,30,.28);

    position:absolute;

}

/*================ LAST MOVE ================*/

.lastmove{

    background:#d9d64a !important;

}

/*=====================================================
                CHESS PIECES
======================================================*/

.piece{

    font-size:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;
    height:100%;

    cursor:pointer;

    user-select:none;

    transition:.18s;

}

.piece:hover{

    transform:scale(1.08);

}

.white-piece{

    color:#ffffff;

    text-shadow:

    0 0 2px #000,
    0 2px 4px rgba(0,0,0,.45);

}

.black-piece{

    color:#202020;

    text-shadow:

    0 1px 2px rgba(255,255,255,.35);

}

.piece-img{

    width:92%;
    height:92%;

    object-fit:contain;

    display:block;

    pointer-events:none;
    user-select:none;

    transform:scale(1.0);

    filter:drop-shadow(0 3px 8px rgba(0,0,0,.30));

    transition:transform .18s ease;

}

.square:hover .piece-img{

    transform:scale(1.05);

}

.player-side{

    display:inline-block;

    padding:5px 14px;

    margin-bottom:10px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

}

.player-side.white{

    background:#ffffff;

    color:#111;

    border:1px solid #d8d8d8;

}

.player-side.black{

    background:#111;

    color:#fff;

    border:1px solid #444;

}

/*=====================================================
            WINNER CELEBRATION
======================================================*/

.winner-overlay{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(8px);

    z-index:99999;

}

#fireworksCanvas{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

}

.winner-card{

    position:relative;

    z-index:2;

    padding:45px;

    width:480px;

    border-radius:24px;

    background:rgba(20,30,45,.95);

    border:2px solid gold;

    text-align:center;

    color:white;

    box-shadow:0 0 70px rgba(255,215,0,.45);

}

.winner-trophy{

    font-size:90px;

    margin-bottom:15px;

    animation:bounce 1s infinite;

}

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}