*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#121212;--bg2:#1a1a1a;--bg3:#222;--panel:rgba(26,26,26,0.85);
  --gold:#D4AF37;--gold2:#b8962e;--gold-glow:rgba(212,175,55,0.3);
  --text:#E0E0E0;--text2:#999;--text3:#666;
  --light:#E0E0E0;--dark:#3D2B1F;
  --accent:#D4AF37;--selected:rgba(212,175,55,0.5);
  --last-move:rgba(212,175,55,0.25);--legal:rgba(212,175,55,0.35);
  --coord-light:#3D2B1F;--coord-dark:#E0E0E0;
  --board-edge:#2a1f14;--board-edge-top:#3D2B1F;
  --glass:rgba(255,255,255,0.05);--glass-border:rgba(255,255,255,0.08);
  --danger:#ff4757;--success:#2ed573;
}
[data-theme="walnut"]{--light:#d4b896;--dark:#6b4c30;--board-edge:#3a2510;--board-edge-top:#5c3d1f;--coord-light:#6b4c30;--coord-dark:#d4b896}
[data-theme="ocean"]{--light:#c8ddf0;--dark:#4a7faa;--board-edge:#1a3a5c;--board-edge-top:#2a5a8f;--coord-light:#4a7faa;--coord-dark:#c8ddf0}
[data-theme="emerald"]{--light:#d8e8c8;--dark:#5a8a3a;--board-edge:#1f3a1f;--board-edge-top:#2d5a2d;--coord-light:#5a8a3a;--coord-dark:#d8e8c8}
[data-theme="ivory"]{--light:#f5f0e8;--dark:#b0a090;--board-edge:#4a3f30;--board-edge-top:#6a5a48;--coord-light:#b0a090;--coord-dark:#f5f0e8}

body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}

/* ===== LAYOUT ===== */
#app{display:grid;grid-template-columns:220px 1fr 240px;height:100vh;height:100dvh}

/* LEFT SIDEBAR */
#left-panel{background:var(--bg2);border-right:1px solid var(--glass-border);display:flex;flex-direction:column;padding:16px;gap:12px;overflow-y:auto}
#logo{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0}
#logo-img{width:64px;height:64px;filter:drop-shadow(0 0 8px rgba(212,175,55,0.4))}
#logo span{font-family:'Orbitron',monospace;font-size:.65rem;color:var(--gold);letter-spacing:2px;text-transform:uppercase}

#user-profile{display:flex;align-items:center;gap:10px;padding:10px;background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;cursor:pointer;transition:.2s}
#user-profile:hover{border-color:var(--gold);box-shadow:0 0 12px var(--gold-glow)}
#user-avatar-wrap{width:36px;height:36px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:1.2rem;flex-shrink:0}
#user-avatar-wrap img{width:100%;height:100%;object-fit:cover}
#user-name{font-size:.85rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#nav-icons{display:flex;flex-direction:column;gap:4px}
.nav-btn{display:flex;align-items:center;gap:8px;padding:10px 12px;background:none;border:none;border-radius:8px;color:var(--text2);font-size:.9rem;cursor:pointer;transition:.2s;text-align:left}
.nav-btn:hover{background:var(--glass);color:var(--text)}
.nav-btn.active{background:var(--gold-glow);color:var(--gold)}
.nav-btn span{font-size:.8rem}

.side-panel{display:flex;flex-direction:column;gap:8px}
.side-panel.hidden{display:none}
.side-panel h4{font-size:.75rem;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-top:4px}
.sep{height:1px;background:var(--glass-border);margin:4px 0}

.gold-btn{padding:10px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#121212;font-weight:700;font-size:.9rem;cursor:pointer;transition:.2s;text-align:center}
.gold-btn:hover{box-shadow:0 4px 20px var(--gold-glow);transform:translateY(-1px)}
.gold-btn:active{transform:scale(.97)}

.glass-btn{padding:8px 12px;border:1px solid var(--glass-border);border-radius:8px;background:var(--glass);color:var(--text);font-size:.85rem;cursor:pointer;backdrop-filter:blur(10px);transition:.2s;text-align:left}
.glass-btn:hover{border-color:var(--gold);color:var(--gold)}

#mode-select{display:flex;flex-direction:column;gap:4px}
.mode-btn{padding:8px 10px;border:1px solid var(--glass-border);border-radius:8px;background:var(--glass);color:var(--text2);font-size:.8rem;cursor:pointer;text-align:left;transition:.2s}
.mode-btn:hover{border-color:var(--gold)}
.mode-btn.active{border-color:var(--gold);color:var(--gold);background:var(--gold-glow)}

#ai-badge{font-size:.75rem;padding:4px 10px;background:linear-gradient(135deg,var(--danger),var(--gold));border-radius:12px;text-align:center;color:#121212;font-weight:600}

.online-indicator{font-size:.75rem;color:var(--success);padding:4px 0;text-align:center}
#match-status{padding:10px;background:var(--glass);border:1px solid var(--gold);border-radius:10px;text-align:center;font-size:.85rem;color:var(--gold);animation:pulse 1.5s infinite}
#match-status .cancel-match{display:block;margin-top:6px;padding:4px 12px;border:1px solid var(--danger);border-radius:6px;background:none;color:var(--danger);font-size:.75rem;cursor:pointer}

.opponent-online-card{display:flex;align-items:center;gap:8px;padding:8px;background:var(--glass);border:1px solid var(--gold);border-radius:10px;margin-bottom:6px}
.opponent-online-card img{width:32px;height:32px;border-radius:50%;border:2px solid var(--gold)}
.opponent-online-card .oname{font-size:.85rem;font-weight:600}
.opponent-online-card .ocountry{font-size:.75rem;color:var(--text3)}

/* MAIN ARENA */
#arena{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;gap:4px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#1e1e1e 0%,#121212 70%)}

.player-bar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:560px;padding:6px 12px;background:var(--glass);border:1px solid var(--glass-border);border-radius:10px;backdrop-filter:blur(10px)}
.player-info{display:flex;align-items:center;gap:8px}
.player-icon{font-size:1.2rem}
.player-name{font-size:.9rem;font-weight:600}
.player-rating{font-size:.7rem;color:var(--text3)}

.timer{font-family:'Orbitron',monospace;font-size:1.1rem;padding:4px 12px;background:#0a0a0a;border:1px solid var(--glass-border);border-radius:8px;color:var(--text);min-width:80px;text-align:center;transition:color .3s,border-color .3s}
.timer.low{color:var(--danger);border-color:var(--danger);animation:timer-pulse 1s infinite}
@keyframes timer-pulse{0%,100%{opacity:1}50%{opacity:.6}}

.captured{display:flex;flex-wrap:wrap;min-height:20px;gap:1px;width:100%;max-width:560px;padding:0 4px}
.captured img{width:20px;height:20px}

/* BOARD */
#board-wrapper{display:flex;gap:0;width:100%;max-width:560px;position:relative}
#eval-bar{width:14px;border-radius:4px;background:#333;overflow:hidden;flex-shrink:0;position:relative}
#eval-fill{position:absolute;bottom:0;width:100%;height:50%;background:linear-gradient(to top,#fff,#ddd);transition:height .5s ease;border-radius:0 0 4px 4px}

.view-3d #board-wrapper{perspective:900px}
#board-scene{flex:1;position:relative;transition:transform .5s ease}
.view-3d #board-scene{transform:rotateX(28deg) scale(.88);transform-origin:center 60%}

#table-surface{display:none;position:absolute;top:-20px;left:-30px;right:-30px;bottom:-40px;background:radial-gradient(ellipse at 50% 40%,#3D2B1F 0%,#1a0f08 80%);border-radius:12px;z-index:-1;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.view-3d #table-surface{display:block}

#board-frame{padding:8px;background:var(--board-edge);border-radius:4px;box-shadow:0 4px 0 rgba(0,0,0,.3),0 6px 16px rgba(0,0,0,.4)}
.view-3d #board-frame{box-shadow:0 10px 0 rgba(0,0,0,.4),0 14px 30px rgba(0,0,0,.5),inset 0 1px 0 var(--board-edge-top)}

#board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:100%;aspect-ratio:1;border-radius:2px;overflow:hidden}

.square{display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;aspect-ratio:1;transition:background .15s}
.square.light{background:var(--light)}
.square.dark{background:var(--dark)}
.square.selected{background:var(--selected)!important}
.square.last-move{background:var(--last-move)!important}
.square.check{background:radial-gradient(ellipse at center,#ff0000 0%,#e70000 25%,rgba(169,0,0,0) 89%)!important}
.square.legal-move::after{content:'';position:absolute;width:28%;height:28%;background:var(--legal);border-radius:50%;pointer-events:none}
.square.legal-capture::after{content:'';position:absolute;inset:4px;border-radius:50%;border:4px solid rgba(212,175,55,.35);pointer-events:none}

.coord{position:absolute;font-size:clamp(7px,1.6vw,10px);font-weight:700;pointer-events:none;line-height:1}
.coord-rank{top:2px;left:3px}
.coord-file{bottom:1px;right:3px}
.square.light .coord{color:var(--coord-light)}
.square.dark .coord{color:var(--coord-dark)}
.coords-hidden .coord{display:none}

/* PIECES */
.piece-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:85%;height:85%;pointer-events:none;transition:transform .15s ease}
.piece-img{width:100%;height:100%;pointer-events:none;position:relative;z-index:2;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.4));transition:transform .15s,filter .15s}
.piece-base{display:none;position:absolute;bottom:-4px;width:70%;height:14%;background:radial-gradient(ellipse,rgba(212,175,55,.3) 0%,transparent 70%);border-radius:50%;pointer-events:none;z-index:1}

.view-3d .piece-base{display:block}
.view-3d .piece-img{filter:drop-shadow(0 3px 1px rgba(0,0,0,.6)) drop-shadow(0 6px 4px rgba(0,0,0,.3));transform:translateY(-3px)}
.square:hover .piece-wrapper{transform:translateY(-2px) scale(1.05)}
.view-3d .square:hover .piece-wrapper{transform:translateY(-6px) scale(1.08)}
.square.selected .piece-img{filter:drop-shadow(0 0 8px var(--gold)) drop-shadow(0 2px 2px rgba(0,0,0,.3))!important}
.dragging{opacity:.35}

/* STATUS */
#status-bar{width:100%;max-width:560px;text-align:center}
#status{font-size:.8rem;color:var(--text2);padding:2px 12px;background:var(--glass);border-radius:6px;display:inline-block}
#thinking{font-size:.8rem;padding:4px 14px;background:var(--glass);border-radius:6px;color:var(--gold);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ACTION BAR (mobile) */
#action-bar{display:none;gap:8px;width:100%;max-width:560px;justify-content:center}
.glass-btn-sm{width:44px;height:44px;border:1px solid var(--glass-border);border-radius:12px;background:rgba(255,255,255,.05);backdrop-filter:blur(12px);color:var(--text);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.glass-btn-sm:hover{border-color:var(--gold);color:var(--gold)}

/* RIGHT SIDEBAR */
#right-panel{background:var(--bg2);border-left:1px solid var(--glass-border);padding:16px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
#right-panel h4{font-size:.75rem;color:var(--text3);text-transform:uppercase;letter-spacing:1px}
#move-log-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;font-size:.8rem;padding-right:4px}
.move-row{display:flex;gap:6px;padding:4px 8px;border-radius:6px;background:var(--glass);border:1px solid transparent;transition:.15s}
.move-row:last-child{border-color:var(--gold-glow);background:rgba(212,175,55,.08)}
.move-num{color:var(--text3);min-width:24px;font-weight:600}
.move-w,.move-b{padding:2px 6px;border-radius:4px;cursor:default}
.move-w{color:var(--text)}
.move-b{color:var(--text2)}
.move-last{background:var(--gold-glow);color:var(--gold)!important;font-weight:700}

#eval-text{font-family:'Orbitron',monospace;font-size:1.5rem;text-align:center;color:var(--text);padding:8px;background:var(--glass);border-radius:8px;border:1px solid var(--glass-border)}

/* MODALS */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px)}
.hidden{display:none!important}
.modal-box{background:var(--bg2);border:1px solid var(--glass-border);padding:24px;border-radius:16px;width:90%;max-width:400px;max-height:85vh;overflow-y:auto}
.modal-box h2{font-size:1.2rem;margin-bottom:14px;color:var(--gold)}
.modal-close{width:100%;padding:10px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass);color:var(--text);font-size:.9rem;cursor:pointer;margin-top:12px}
.modal-close:hover{border-color:var(--gold)}

.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;background:#fff;color:#333;border-radius:10px;font-size:.95rem;font-weight:500;text-decoration:none;transition:.2s;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.google-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.4)}
.hint{color:var(--text3);font-size:.75rem;margin-top:8px;text-align:center}

#profile-user-card{display:flex;align-items:center;gap:12px;padding:14px;background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;margin-bottom:12px}
#profile-user-card img{width:48px;height:48px;border-radius:50%;border:2px solid var(--gold)}
.user-info-card{flex:1}
.user-info-card .uname{font-weight:600}
.user-info-card .uemail{font-size:.7rem;color:var(--text3)}

#stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.stat-card{text-align:center;padding:8px 4px;background:var(--glass);border:1px solid var(--glass-border);border-radius:8px}
.stat-card .sv{font-size:1.2rem;font-weight:700;color:var(--gold)}
.stat-card .sl{font-size:.6rem;color:var(--text3)}

.logout-btn{display:block;text-align:center;padding:8px;background:rgba(255,71,87,.1);border:1px solid rgba(255,71,87,.2);color:var(--danger);border-radius:8px;text-decoration:none;font-size:.85rem;transition:.2s}
.logout-btn:hover{background:rgba(255,71,87,.2)}

.game-over-box{text-align:center}
.game-over-box h2{font-size:1.4rem}

#promotion-choices{display:flex;gap:10px;background:var(--bg2);border:1px solid var(--glass-border);padding:18px;border-radius:14px}
.promo-piece{width:65px;height:65px;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:10px;background:var(--glass);border:1px solid var(--glass-border);cursor:pointer;transition:.15s}
.promo-piece img{width:100%;height:100%}
.promo-piece:hover{border-color:var(--gold);transform:scale(1.1)}

/* History items */
.history-item{display:flex;align-items:center;gap:8px;padding:8px;background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;cursor:pointer;font-size:.8rem;margin-bottom:4px;transition:.15s}
.history-item:hover{border-color:var(--gold)}
.h-icon{font-size:1rem;min-width:20px;text-align:center}
.h-info{flex:1;color:var(--text2)}
.h-date{font-size:.65rem;color:var(--text3)}

/* Replay */
#replay-moves{display:flex;flex-wrap:wrap;gap:4px;padding:8px;background:var(--glass);border-radius:8px;max-height:50vh;overflow-y:auto;font-size:.8rem}

/* Mobile sidebar */
#mob-sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80}
#mob-sidebar{position:fixed;top:0;left:0;width:280px;height:100%;background:var(--bg2);z-index:90;transform:translateX(-100%);transition:transform .3s ease;overflow-y:auto;padding:16px}
#mob-sidebar.open{transform:translateX(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  #app{grid-template-columns:1fr}
  #left-panel,#right-panel{display:none}
  #arena{padding:4px;gap:2px}
  #action-bar{display:flex}
  .player-bar{padding:4px 8px}
  .timer{font-size:.9rem;padding:3px 8px}
  #board-frame{padding:4px}
  .piece-wrapper{width:90%;height:90%}
  #eval-bar{width:10px}
  #status-bar{order:10}
}

@media(max-width:400px){
  .player-name{font-size:.8rem}
  .timer{font-size:.8rem;min-width:60px}
  .glass-btn-sm{width:38px;height:38px;font-size:1rem}
}

/* Toggle rows */
.toggle-row{display:flex;align-items:center;gap:8px;font-size:.85rem;cursor:pointer;padding:4px 0}
.toggle-row input{width:16px;height:16px;accent-color:var(--gold)}

.theme-btn{width:100%;padding:8px 10px;border:1px solid var(--glass-border);border-radius:8px;background:var(--glass);color:var(--text2);font-size:.8rem;cursor:pointer;text-align:left;transition:.2s;margin-bottom:4px}
.theme-btn:hover{border-color:var(--gold)}
.theme-btn.active{border-color:var(--gold);color:var(--gold);background:var(--gold-glow)}