:root{--bg:#1a1a2e;--bg2:#16213e;--surface:#0f3460;--accent:#e94560;--accent2:#ff6b6b;--gold:#f0c040;--gold-dim:#a8882e;--text:#eaeaea;--text-dim:#8892a4;--board-light:#d4a76a;--board-dark:#8b5e3c;--white-piece:#f5f0e8;--white-shadow:#c8bfb0;--black-piece:#2d2d3d;--highlight:rgba(233,69,96,0.5);--valid:rgba(240,192,64,0.7);--radius:12px;--tr:0.25s cubic-bezier(0.4,0,0.2,1)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Source Sans 3',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 20% 50%,rgba(233,69,96,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(15,52,96,.3) 0%,transparent 50%)}

/* ===== COMMON ===== */
.screen{display:none;min-height:100vh;position:relative;z-index:1}
.screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.screen-fade{animation:fadeIn .3s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card{background:linear-gradient(145deg,rgba(15,52,96,.6),rgba(22,33,62,.8));border:1px solid rgba(233,69,96,.15);border-radius:20px;padding:32px;max-width:480px;width:100%;backdrop-filter:blur(20px)}
.title{font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:900;text-align:center;margin-bottom:4px;background:linear-gradient(135deg,var(--text),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.subtitle{color:var(--text-dim);text-align:center;margin-bottom:24px;font-size:.95rem}
.input-g{margin-bottom:14px}
.input-g label{display:block;font-size:.75rem;color:var(--text-dim);margin-bottom:3px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
.input-g input{width:100%;padding:11px 14px;border:2px solid rgba(255,255,255,.08);border-radius:var(--radius);background:rgba(0,0,0,.3);color:var(--text);font-size:1rem;font-family:inherit;outline:none;transition:border .3s}
.input-g input:focus{border-color:var(--accent)}
.btn{width:100%;padding:13px;border:none;border-radius:var(--radius);font-size:.95rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all var(--tr);text-transform:uppercase;letter-spacing:1.5px}
.btn-p{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 4px 16px rgba(233,69,96,.3)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(233,69,96,.4)}
.btn-s{background:rgba(255,255,255,.06);color:var(--text);border:2px solid rgba(255,255,255,.1)}
.btn-s:hover{border-color:var(--gold);color:var(--gold)}
.btn-g{background:linear-gradient(135deg,rgba(240,192,64,.15),rgba(240,192,64,.05));color:var(--gold);border:2px solid rgba(240,192,64,.3)}
.btn-g:hover{border-color:var(--gold);box-shadow:0 0 20px rgba(240,192,64,.15)}
.btn-d{background:rgba(233,69,96,.1);color:var(--accent);border:2px solid rgba(233,69,96,.2)}
.err{color:var(--accent);font-size:.85rem;text-align:center;margin-top:8px;min-height:1.2em}
.link{color:var(--gold);cursor:pointer;text-decoration:underline;font-size:.9rem}
.divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--text-dim);font-size:.75rem;text-transform:uppercase;letter-spacing:2px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)}
.row{display:flex;gap:8px}
.row>.btn{flex:1}
.gap{margin-bottom:10px}
.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--accent);border-radius:50%;margin:0 auto 16px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== LANDING ===== */
.landing{max-width:700px;text-align:center}
.landing-hero{font-size:4rem;margin-bottom:8px}
.landing-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0;text-align:left}
.feat{padding:16px;border-radius:var(--radius);background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.04)}
.feat-icon{font-size:1.5rem;margin-bottom:6px}
.feat-title{font-weight:700;font-size:.9rem;margin-bottom:3px}
.feat-desc{font-size:.8rem;color:var(--text-dim);line-height:1.4}
.lang-pick{display:flex;gap:10px;justify-content:center;margin:20px 0}
.lang-btn{padding:12px 28px;border-radius:var(--radius);border:2px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2);color:var(--text);font-family:inherit;font-weight:700;font-size:1rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}
.lang-btn:hover{border-color:var(--gold)}
.lang-btn.active{border-color:var(--gold);background:rgba(240,192,64,.1);color:var(--gold)}
.lang-sw{cursor:pointer;font-size:.8rem;color:var(--text-dim);padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.2);border:none;font-family:inherit}
.lang-sw:hover{color:var(--text)}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:none;align-items:center;padding:10px 20px;background:rgba(26,26,46,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05)}
.nav.show{display:flex}
.nav-logo{font-family:'Playfair Display',serif;font-weight:900;font-size:1.1rem;color:var(--gold);margin-right:auto}
.nav-btn{background:none;border:none;color:var(--text-dim);font-size:1.3rem;cursor:pointer;padding:6px 10px;border-radius:8px;transition:all .2s}
.nav-btn:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-user{display:flex;align-items:center;gap:8px;margin-left:12px}
.nav-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:rgba(255,255,255,.1);overflow:hidden}
.nav-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.nav-name{font-weight:700;font-size:.88rem;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-rating{font-size:.75rem;color:var(--gold)}

/* ===== MENU ===== */
#menuScreen.active{padding-top:70px;justify-content:flex-start}
.menu-profile{text-align:center;margin-bottom:24px}
.menu-avatar{width:80px;height:80px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;background:rgba(255,255,255,.08);border:3px solid var(--gold);overflow:hidden}
.menu-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.menu-name{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700}
.menu-league{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 0;font-size:.9rem;color:var(--gold)}
.menu-stats{display:flex;gap:16px;justify-content:center;margin:10px 0;font-size:.82rem;color:var(--text-dim)}
.menu-stats .stat{text-align:center}
.menu-stats .stat-val{font-size:1.1rem;font-weight:700;color:var(--text)}
.rating-bar{background:rgba(0,0,0,.3);border-radius:8px;height:8px;margin:8px 0;overflow:hidden}
.rating-bar-fill{height:100%;border-radius:8px;transition:width .5s}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.menu-grid .btn{font-size:.82rem;padding:16px 10px}

/* ===== LEADERBOARD ===== */
#lbScreen.active{padding-top:70px;justify-content:flex-start}
.lb-list{max-width:600px;width:100%;margin:0 auto}
.lb-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius);background:rgba(0,0,0,.2);margin-bottom:4px;border:1px solid rgba(255,255,255,.03);transition:background .2s;cursor:pointer}
.lb-item:hover{background:rgba(255,255,255,.05)}
.lb-rank{width:30px;font-weight:700;text-align:center;font-size:.9rem;color:var(--text-dim)}
.lb-rank.top1{color:#ffd700;font-size:1.1rem}
.lb-rank.top2{color:#c0c0c0}
.lb-rank.top3{color:#cd7f32}
.lb-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:rgba(255,255,255,.08);flex-shrink:0;overflow:hidden}
.lb-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.lb-info{flex:1;min-width:0}
.lb-name{font-weight:700;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-detail{font-size:.75rem;color:var(--text-dim)}
.lb-rating{font-weight:700;color:var(--gold);font-size:1rem;min-width:50px;text-align:right}
.lb-league{font-size:1.1rem}
.season-info{text-align:center;color:var(--text-dim);font-size:.82rem;margin-bottom:16px;padding:10px;background:rgba(0,0,0,.2);border-radius:var(--radius)}

/* ===== PROFILE ===== */
#profileScreen.active{padding-top:70px;justify-content:flex-start}
.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:12px 0}
.avatar-opt{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:rgba(255,255,255,.06);border:2px solid transparent;cursor:pointer;transition:all .2s}
.avatar-opt:hover{border-color:rgba(255,255,255,.2)}
.avatar-opt.selected{border-color:var(--gold);background:rgba(240,192,64,.1)}
.avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.avatar-upload{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px;border:2px dashed rgba(255,255,255,.1);border-radius:var(--radius);cursor:pointer;transition:border-color .2s}
.avatar-upload:hover{border-color:var(--gold)}
.avatar-upload input{display:none}
.avatar-preview{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);display:none}
.skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin:12px 0}
.skin-opt{padding:12px 8px;border-radius:var(--radius);text-align:center;border:2px solid rgba(255,255,255,.05);cursor:pointer;transition:all .2s;background:rgba(0,0,0,.2)}
.skin-opt:hover{border-color:rgba(255,255,255,.15)}
.skin-opt.selected{border-color:var(--gold);background:rgba(240,192,64,.08)}
.skin-opt.locked{opacity:.35;cursor:not-allowed}
.skin-piece{width:40px;height:40px;border-radius:50%;margin:0 auto 4px}
.skin-label{font-size:.7rem;color:var(--text-dim)}

/* ===== PLAY TABS ===== */
.tab-row{display:flex;gap:3px;margin-bottom:16px;background:rgba(0,0,0,.2);border-radius:var(--radius);padding:3px}
.tab-btn{flex:1;padding:9px;border:none;border-radius:calc(var(--radius) - 2px);background:transparent;color:var(--text-dim);font-family:inherit;font-weight:700;font-size:.78rem;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.5px}
.tab-btn.active{background:var(--surface);color:var(--text)}
.tab-c{display:none}
.tab-c.active{display:block}
.diff-row{display:flex;gap:6px;margin:12px 0}
.diff-btn{flex:1;padding:10px;border:2px solid rgba(255,255,255,.1);border-radius:var(--radius);background:rgba(0,0,0,.2);color:var(--text-dim);font-family:inherit;font-weight:700;font-size:.8rem;cursor:pointer;text-align:center;transition:all .2s}
.diff-btn.selected{border-color:var(--gold);color:var(--gold);background:rgba(240,192,64,.08)}
.cb-row{display:flex;align-items:center;gap:8px;margin:12px 0}
.cb-row input{width:16px;height:16px;accent-color:var(--accent)}
.cb-row label{color:var(--text-dim);font-size:.88rem;cursor:pointer}
.pub-rooms{max-height:200px;overflow-y:auto;margin:10px 0}
.pub-rooms::-webkit-scrollbar{width:4px}
.pub-rooms::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.pub-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius);background:rgba(0,0,0,.2);margin-bottom:4px;border:1px solid rgba(255,255,255,.03);cursor:pointer;transition:all .2s}
.pub-item:hover{border-color:var(--gold)}
.pub-item .host{font-weight:700;flex:1;font-size:.9rem}
.pub-item .code{color:var(--gold);font-family:'Playfair Display',serif}
.pub-item .join-tag{font-size:.7rem;color:var(--accent);font-weight:700;text-transform:uppercase}
.no-rooms{color:var(--text-dim);text-align:center;padding:16px;font-size:.88rem}

/* ===== WAITING ===== */
.wait-card{text-align:center}
.wait-card h2{font-family:'Playfair Display',serif;font-size:1.4rem;margin-bottom:8px}
.wait-actions{margin-top:12px}
.wait-actions .row{justify-content:center;flex-wrap:wrap}
.wait-actions .btn{flex:0 1 auto;min-width:120px}
.wait-code{font-family:'Playfair Display',serif;font-size:2.2rem;color:var(--gold);font-weight:900;letter-spacing:5px;margin:16px 0}
.wait-hint{color:var(--text-dim);font-size:.88rem;margin-bottom:16px;line-height:1.5}

/* ===== GAME ===== */
#gameScreen.active{display:block;padding:0}
.game-layout{display:flex;gap:16px;padding:60px 16px 16px;max-width:1200px;margin:0 auto;min-height:100vh;align-items:flex-start;justify-content:center}
.game-panel{display:flex;flex-direction:column;gap:8px;width:240px;flex-shrink:0}
.room-info{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.3);border-radius:var(--radius);padding:8px 12px}
.room-code{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--gold);font-weight:700}
.room-label{font-size:.65rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}
.copy-btn{margin-left:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:var(--text-dim);padding:4px 8px;border-radius:6px;cursor:pointer;font-size:.75rem;font-family:inherit}
.p-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius);background:rgba(0,0,0,.2);border:2px solid transparent;transition:all .4s;cursor:pointer}
.p-bar.active{border-color:var(--gold);background:rgba(240,192,64,.08);animation:barPulse 2s ease-in-out infinite}
@keyframes barPulse{0%,100%{box-shadow:0 0 12px rgba(240,192,64,.06)}50%{box-shadow:0 0 20px rgba(240,192,64,.12)}}
.p-icon{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.9rem;background:rgba(255,255,255,.08);overflow:hidden;border:2px solid rgba(255,255,255,.1)}
.p-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.p-name{font-weight:700;font-size:.85rem;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-label{font-size:.65rem;color:var(--text-dim)}
.p-rating-sm{font-size:.7rem;color:var(--gold)}
.p-count{margin-left:auto;font-weight:700;font-size:1rem;color:var(--gold-dim)}
.p-timer{font-family:'Playfair Display',serif;font-size:.95rem;font-weight:700;padding:3px 10px;border-radius:8px;min-width:58px;text-align:center;margin-left:auto}
.p-timer.active-timer{background:rgba(240,192,64,.15);color:var(--gold)}
.p-timer.low{color:var(--accent);background:rgba(233,69,96,.15);animation:timerPulse 1s ease-in-out infinite}
.p-timer.no-timer{display:none}
@keyframes timerPulse{0%,100%{opacity:1}50%{opacity:.5}}
.draw-btn{background:rgba(78,205,196,.1);border:2px solid rgba(78,205,196,.3);color:#4ecdc4}
.draw-btn:hover{background:rgba(78,205,196,.2)}
.p-count.changed{animation:countB .4s ease;color:var(--accent)}
@keyframes countB{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
.turn-ind{font-size:.88rem;font-weight:700;padding:8px 14px;border-radius:var(--radius);text-align:center;transition:all .4s}
.turn-ind.yt{background:rgba(240,192,64,.15);color:var(--gold)}
.turn-ind.wt{background:rgba(255,255,255,.05);color:var(--text-dim)}
.turn-ind.winner{background:linear-gradient(135deg,rgba(233,69,96,.2),rgba(240,192,64,.2));color:var(--gold);font-family:'Playfair Display',serif;font-size:1rem}
.rating-change{text-align:center;font-size:.85rem;padding:6px;border-radius:var(--radius);background:rgba(0,0,0,.2);margin-top:2px}
.rating-change .plus{color:#4ecdc4}
.rating-change .minus{color:var(--accent)}
.g-actions{display:flex;gap:5px;flex-wrap:wrap}
.g-actions button{flex:1;min-width:50px;padding:8px 4px;border-radius:var(--radius);font-family:inherit;font-weight:700;font-size:.7rem;cursor:pointer;text-transform:uppercase;transition:all var(--tr)}
.sur-btn{background:rgba(233,69,96,.1);border:2px solid rgba(233,69,96,.3);color:var(--accent)}
.sur-btn:hover{background:rgba(233,69,96,.2)}
.rem-btn{background:rgba(240,192,64,.12);border:2px solid var(--gold);color:var(--gold)}
.rem-btn:hover{background:rgba(240,192,64,.2)}
.rem-btn:disabled{opacity:.5}
.rul-btn{background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.1);color:var(--text-dim)}
.lv-btn{background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.1);color:var(--text-dim)}
.lv-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ===== BOARD ===== */
/* ===== BOARD NOTATION ===== */
.board-outer{position:relative;display:inline-block}
.board-outer.has-notation{padding:18px}
.notation{position:absolute;display:flex;font-size:.6rem;font-weight:700;color:rgba(255,255,255,.5);pointer-events:none}
.n-top,.n-bottom{left:18px;right:18px;height:16px;flex-direction:row}
.n-top{top:0}.n-bottom{bottom:0}
.n-left,.n-right{top:18px;bottom:18px;width:16px;flex-direction:column}
.n-left{left:0}.n-right{right:0}
.notation span{display:flex;align-items:center;justify-content:center;flex:1}
.board-outer:not(.has-notation) .notation{display:none}
/* ===== SETTINGS TOGGLES ===== */
.settings-toggles{display:flex;flex-direction:column;gap:8px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:rgba(0,0,0,.15);border-radius:10px;font-size:.85rem}
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.1);border-radius:24px;transition:.25s}
.toggle-slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.25s}
.toggle-switch input:checked+.toggle-slider{background:var(--gold)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px)}
/* ===== DRAG ===== */
.piece.dragging{opacity:.2;transform:scale(.85)!important}
.cell.drag-hover{background:rgba(240,192,64,.35)!important;box-shadow:inset 0 0 0 2px var(--gold)!important}
.board-container{flex-shrink:0}
.board-frame{background:linear-gradient(145deg,#5a3a20,#3d2510);border-radius:12px;padding:8px;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.board{display:grid;grid-template-columns:repeat(8,1fr);border-radius:3px;overflow:hidden}
.cell{width:clamp(42px,8vw,64px);height:clamp(42px,8vw,64px);display:flex;align-items:center;justify-content:center;position:relative;cursor:default;transition:background .15s}
.cell.light{background:var(--board-light)}
.cell.dark{background:var(--board-dark)}
.cell.selected{background:var(--highlight)!important}
.cell.valid-move{cursor:pointer}
.cell.valid-move::after{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:var(--valid);animation:dp 1.5s ease-in-out infinite;z-index:3}
.cell.can-capture::after{width:26px;height:26px;background:rgba(233,69,96,.5);border:2px solid var(--accent)}
@keyframes dp{0%,100%{opacity:.5;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
.cell.has-piece{cursor:grab}
body.is-dragging{cursor:grabbing!important}
body.is-dragging *{cursor:grabbing!important}
.cell.has-piece:hover .piece{transform:scale(1.06)}
.cell.must-capture{box-shadow:inset 0 0 0 3px var(--accent)!important;animation:mustCapPulse 1s ease-in-out infinite}
.cell.must-capture .piece{filter:drop-shadow(0 0 6px rgba(233,69,96,.6))}
@keyframes mustCapPulse{0%,100%{box-shadow:inset 0 0 0 3px rgba(233,69,96,.6)}50%{box-shadow:inset 0 0 0 3px rgba(233,69,96,1),0 0 12px rgba(233,69,96,.3)}}
.cell.last-from{box-shadow:inset 0 0 0 2px rgba(240,192,64,.25)}
.cell.last-to{box-shadow:inset 0 0 0 3px rgba(240,192,64,.4)}

/* ===== PIECES ===== */
.piece{width:78%;height:78%;border-radius:50%;position:relative;transition:transform .15s;z-index:2}
.piece.white-piece{background:radial-gradient(circle at 35% 35%,#fff,var(--white-piece));box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 -3px 5px var(--white-shadow),inset 0 2px 4px rgba(255,255,255,.8)}
.piece.black-piece{background:radial-gradient(circle at 35% 35%,#55556a,var(--black-piece));box-shadow:0 3px 8px rgba(0,0,0,.6),inset 0 -3px 5px rgba(0,0,0,.4),inset 0 2px 4px rgba(255,255,255,.15)}
.piece.king::after{content:'♛';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(14px,2.5vw,24px);line-height:1;color:var(--gold);text-shadow:0 1px 3px rgba(0,0,0,.4)}

/* SKINS */
.piece.skin-bronze.white-piece{background:radial-gradient(circle at 35% 35%,#e8c896,#cd7f32);box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 -3px 5px #8b5e3c}
.piece.skin-bronze.black-piece{background:radial-gradient(circle at 35% 35%,#8b6b3c,#5a3a20)}
.piece.skin-silver.white-piece{background:radial-gradient(circle at 35% 35%,#fff,#c0c0c0);box-shadow:0 3px 10px rgba(192,192,192,.4),inset 0 -3px 5px #a0a0a0}
.piece.skin-silver.black-piece{background:radial-gradient(circle at 35% 35%,#a0a0a0,#606070)}
.piece.skin-gold.white-piece{background:radial-gradient(circle at 30% 30%,#fff8dc,#ffd700);box-shadow:0 3px 12px rgba(255,215,0,.4),inset 0 -3px 5px #daa520}
.piece.skin-gold.black-piece{background:radial-gradient(circle at 35% 35%,#b8860b,#8b6914)}
.piece.skin-platinum.white-piece{background:radial-gradient(circle at 30% 30%,#f0f8ff,#e5e4e2);box-shadow:0 3px 15px rgba(229,228,226,.5)}
.piece.skin-platinum.black-piece{background:radial-gradient(circle at 35% 35%,#8899aa,#556677)}
.piece.skin-diamond.white-piece{background:radial-gradient(circle at 30% 30%,#f0ffff,#b9f2ff);box-shadow:0 3px 15px rgba(185,242,255,.5),0 0 12px rgba(0,191,255,.3)}
.piece.skin-diamond.black-piece{background:radial-gradient(circle at 35% 35%,#4169e1,#1a1a8e)}
.piece.skin-master.white-piece{background:radial-gradient(circle at 30% 30%,#fff,#ff69b4,#ffd700);box-shadow:0 3px 15px rgba(255,105,180,.4);animation:masterGlow 2s ease-in-out infinite}
.piece.skin-master.black-piece{background:radial-gradient(circle at 35% 35%,#8b008b,#4b0082);animation:masterGlow 2s ease-in-out infinite}
@keyframes masterGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}

/* ANIMATIONS */
.piece.move-anim{animation:pm .3s ease-out}
@keyframes pm{from{transform:scale(.6);opacity:.5}to{transform:scale(1);opacity:1}}
.piece.capture-anim{animation:pc .35s ease-out forwards}
@keyframes pc{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.5}100%{transform:scale(0);opacity:0}}
.piece.promote-anim{animation:pp .5s ease-out}
@keyframes pp{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(240,192,64,0)}50%{transform:scale(1.2);box-shadow:0 0 20px 8px rgba(240,192,64,.5)}100%{transform:scale(1)}}

/* ===== CHAT ===== */
.chat-panel{display:flex;flex-direction:column;background:rgba(0,0,0,.25);border-radius:var(--radius);border:1px solid rgba(255,255,255,.05);width:250px;height:440px;overflow:hidden;flex-shrink:0}
.chat-header{padding:10px 14px;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);border-bottom:1px solid rgba(255,255,255,.05)}
.chat-messages{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px}
.chat-messages::-webkit-scrollbar{width:3px}
.chat-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1)}
.chat-msg{font-size:.84rem;line-height:1.4}
.chat-msg .name{font-weight:700;margin-right:4px}
.chat-msg .name.white{color:var(--white-piece)}
.chat-msg .name.black{color:#8888aa}
.chat-msg.system{color:var(--text-dim);font-style:italic;font-size:.78rem}
.chat-input-row{display:flex;border-top:1px solid rgba(255,255,255,.05)}
.chat-input-row input{flex:1;padding:10px;background:transparent;border:none;color:var(--text);font-family:inherit;font-size:.85rem;outline:none}
.chat-input-row button{padding:10px 12px;background:transparent;border:none;color:var(--accent);cursor:pointer;font-weight:700}
.chat-toggle{display:none;position:fixed;bottom:16px;right:16px;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;border:none;font-size:20px;cursor:pointer;z-index:100;box-shadow:0 4px 14px rgba(233,69,96,.4);align-items:center;justify-content:center}
.chat-toggle .badge{position:absolute;top:-2px;right:-2px;width:16px;height:16px;border-radius:50%;background:var(--gold);color:var(--bg);font-size:.6rem;font-weight:700;display:none;align-items:center;justify-content:center}
.chat-toggle .badge.show{display:flex}

/* ===== MODAL ===== */
.modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;align-items:center;justify-content:center;padding:20px}
.modal-ov.open{display:flex}
.modal{background:linear-gradient(145deg,var(--bg2),var(--bg));border:1px solid rgba(233,69,96,.2);border-radius:20px;padding:28px;max-width:520px;width:100%;max-height:80vh;overflow-y:auto}
.modal h2{font-family:'Playfair Display',serif;font-size:1.4rem;margin-bottom:16px;color:var(--gold)}
.modal h3{color:var(--gold);font-size:.9rem;margin:14px 0 6px;text-transform:uppercase;letter-spacing:1px}
.rule-item{display:flex;gap:8px;align-items:flex-start;margin-bottom:6px;color:var(--text-dim);font-size:.9rem;line-height:1.5}
.rule-icon{color:var(--gold);flex-shrink:0}
.close-btn{width:100%;margin-top:16px;padding:10px;border-radius:var(--radius);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text);font-family:inherit;font-size:.9rem;cursor:pointer}
.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:150;overflow:hidden}
.confetti{position:absolute;width:8px;height:8px;top:-10px;animation:cf 3s linear forwards}
@keyframes cf{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

/* ===== LEVELS ===== */
.lvl-badge{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(240,192,64,.2),rgba(240,192,64,.05));border:1px solid rgba(240,192,64,.3);border-radius:10px;padding:1px 7px;font-size:.7rem;font-weight:700;color:var(--gold);min-width:32px}
.xp-bar-wrap{width:100%;background:rgba(0,0,0,.3);border-radius:6px;height:8px;margin-top:6px;overflow:hidden}
.xp-bar{height:100%;background:linear-gradient(90deg,var(--gold),#f0c040);border-radius:6px;transition:width .5s ease}
.xp-label{font-size:.68rem;color:var(--text-dim);margin-top:3px;text-align:center}
.prof-level{display:flex;align-items:center;gap:6px;justify-content:center;margin:8px 0}
.prof-level .lvl-badge{font-size:.85rem;padding:2px 10px}
.nav-lvl{font-size:.62rem;color:var(--gold);margin-top:-2px}

/* ===== PROFILE MODAL ===== */
.prof-modal{text-align:center}
.prof-modal .menu-avatar{width:72px;height:72px;margin:0 auto 8px;font-size:2.2rem}
.prof-modal-name{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700}
.prof-modal-league{color:var(--gold);font-size:.9rem;margin:4px 0}
.prof-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.prof-stat{text-align:center;padding:8px;background:rgba(0,0,0,.2);border-radius:8px}
.prof-stat-val{font-weight:700;font-size:1.1rem;color:var(--text)}
.prof-stat-lbl{font-size:.7rem;color:var(--text-dim);margin-top:2px}
.prof-skins{display:flex;gap:6px;justify-content:center;margin:10px 0;flex-wrap:wrap}
.prof-skin{width:32px;height:32px;border-radius:50%}
.prof-actions{display:flex;gap:6px;justify-content:center;margin-top:12px}
.prof-actions .btn{width:auto;padding:8px 16px;font-size:.8rem}
.prof-history{margin-top:14px;max-height:180px;overflow-y:auto;text-align:left}
.prof-match{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;margin-bottom:3px;background:rgba(0,0,0,.15);font-size:.82rem}
.prof-match .win{color:#4ecdc4;font-weight:700}
.prof-match .loss{color:var(--accent);font-weight:700}
.prof-match .opp{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prof-match .change{font-weight:700;min-width:40px;text-align:right}

/* ===== FRIENDS SCREEN ===== */
#friendsScreen.active{padding-top:70px;justify-content:flex-start}
.friend-tabs{display:flex;gap:3px;margin-bottom:12px;background:rgba(0,0,0,.2);border-radius:var(--radius);padding:3px}
.friend-tab{flex:1;padding:8px;border:none;border-radius:calc(var(--radius) - 2px);background:transparent;color:var(--text-dim);font-family:inherit;font-weight:700;font-size:.78rem;cursor:pointer;transition:all .2s;text-transform:uppercase}
.friend-tab.active{background:var(--surface);color:var(--text)}
.friend-list{max-height:400px;overflow-y:auto}
.friend-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius);background:rgba(0,0,0,.2);margin-bottom:4px;border:1px solid rgba(255,255,255,.03)}
.friend-item .lb-avatar{width:36px;height:36px;flex-shrink:0}
.friend-item .f-info{flex:1;min-width:0}
.friend-item .f-name{font-weight:700;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.friend-item .f-name:hover{color:var(--gold)}
.friend-item .f-status{font-size:.7rem}
.f-online{color:#4ecdc4}
.f-offline{color:var(--text-dim)}
.friend-item .f-actions{display:flex;gap:4px}
.friend-item .f-actions button{padding:4px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2);color:var(--text-dim);font-size:.72rem;cursor:pointer;font-family:inherit;font-weight:700}
.friend-item .f-actions button:hover{border-color:var(--gold);color:var(--gold)}
.friend-item .f-actions .btn-accept{border-color:rgba(78,205,196,.3);color:#4ecdc4}
.friend-item .f-actions .btn-decline{border-color:rgba(233,69,96,.3);color:var(--accent)}

/* ===== LOBBY CHAT ===== */
.lobby-btn{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);padding:8px 20px;border-radius:24px;background:rgba(26,26,46,.95);border:1px solid rgba(255,255,255,.1);color:var(--text-dim);font-family:inherit;font-size:.82rem;cursor:pointer;z-index:50;backdrop-filter:blur(12px);display:none}
.lobby-btn:hover{border-color:var(--gold);color:var(--text)}
.lobby-panel{display:none;position:fixed;bottom:60px;left:50%;transform:translateX(-50%);width:380px;max-width:90vw;height:320px;background:rgba(26,26,46,.97);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);z-index:51;flex-direction:column;overflow:hidden}
.lobby-panel.open{display:flex}
.lobby-panel .chat-header{display:flex;justify-content:space-between;align-items:center}
.lobby-close{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:1rem}
.nav-user{cursor:pointer}

/* ===== INVITE TOAST ===== */
.invite-toast{position:fixed;top:70px;right:20px;background:linear-gradient(145deg,rgba(15,52,96,.95),rgba(22,33,62,.95));border:1px solid var(--gold);border-radius:var(--radius);padding:14px 18px;z-index:200;backdrop-filter:blur(20px);animation:fadeIn .3s ease-out;max-width:300px}

/* ===== INVITE POPUP ===== */
.invite-popup{margin-top:14px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;animation:fadeIn .2s ease-out}
.invite-popup-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);border-bottom:1px solid rgba(255,255,255,.05)}
.invite-popup-list{max-height:220px;overflow-y:auto;padding:6px}
.invite-popup-list::-webkit-scrollbar{width:3px}
.invite-popup-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1)}
.invite-popup-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;margin-bottom:3px;background:rgba(0,0,0,.15);transition:background .15s}
.invite-popup-item:hover{background:rgba(255,255,255,.05)}
.invite-popup-item .ip-name{flex:1;font-weight:700;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.invite-popup-item .ip-status{font-size:.7rem;color:var(--text-dim)}
.invite-popup-item .ip-btn{padding:4px 12px;border-radius:8px;border:1px solid rgba(240,192,64,.3);background:rgba(240,192,64,.08);color:var(--gold);font-size:.72rem;cursor:pointer;font-family:inherit;font-weight:700;transition:all .2s}
.invite-popup-item .ip-btn:hover{background:rgba(240,192,64,.15);border-color:var(--gold)}
.invite-popup-item .ip-btn:disabled{opacity:.5;cursor:default}
.invite-popup-empty{text-align:center;padding:16px;color:var(--text-dim);font-size:.85rem}
.invite-toast .invite-name{font-weight:700;color:var(--gold)}
.invite-toast .invite-actions{display:flex;gap:6px;margin-top:8px}
.invite-toast .invite-actions button{padding:6px 14px;border-radius:8px;font-family:inherit;font-weight:700;font-size:.8rem;cursor:pointer}

/* ===== CHAT MUTE ===== */
.mute-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.9rem;padding:2px 6px}
.mute-btn:hover{color:var(--text)}

/* ===== EMOTES ===== */
.emote-toggle{display:none;position:fixed;bottom:16px;left:16px;width:48px;height:48px;border-radius:50%;background:var(--gold);color:var(--bg);border:none;font-size:22px;cursor:pointer;z-index:100;box-shadow:0 4px 14px rgba(240,192,64,.4);align-items:center;justify-content:center}
.emote-panel{display:none;position:fixed;bottom:72px;left:14px;background:rgba(26,26,46,.97);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:10px;z-index:99;gap:6px;flex-wrap:wrap;width:200px;justify-content:center}
.emote-panel.open{display:flex}
.emote-btn{width:44px;height:44px;border:none;border-radius:10px;background:rgba(255,255,255,.06);font-size:1.5rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.emote-btn:hover{background:rgba(255,255,255,.12);transform:scale(1.15)}
.emote-btn:active{transform:scale(.9)}
.emote-bubble{position:fixed;z-index:160;font-size:3rem;pointer-events:none;animation:emotePop 2s ease-out forwards;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.emote-bubble.top{top:120px;left:50%;transform:translateX(-50%)}
.emote-bubble.bottom{bottom:120px;left:50%;transform:translateX(-50%)}
@keyframes emotePop{0%{opacity:0;transform:translateX(-50%) scale(0.3)}15%{opacity:1;transform:translateX(-50%) scale(1.3)}30%{transform:translateX(-50%) scale(1)}80%{opacity:1;transform:translateX(-50%) scale(1) translateY(-20px)}100%{opacity:0;transform:translateX(-50%) scale(0.8) translateY(-40px)}}
@media(min-width:1025px){
  .emote-toggle{display:none!important}
  .emote-panel-desktop{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin-top:4px}
  .emote-panel-desktop .emote-btn{width:36px;height:36px;font-size:1.2rem;border-radius:8px}
}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .chat-panel{display:none;position:fixed;bottom:72px;right:14px;left:14px;width:auto;height:300px;z-index:99;border:1px solid rgba(255,255,255,.1);background:rgba(26,26,46,.97);backdrop-filter:blur(20px)}
  .chat-panel.open{display:flex}
  .chat-toggle{display:flex}
  .emote-toggle{display:flex}
  .emote-panel-desktop{display:none!important}
}
@media(max-width:768px){
  .game-layout{flex-direction:column;align-items:center;gap:8px}
  .game-panel{width:100%;max-width:360px}
  .cell{width:clamp(36px,11vw,50px);height:clamp(36px,11vw,50px)}
  .nav-name{display:none}
  .landing-features{grid-template-columns:1fr}
}