:root {
    /* Classic Wood Theme */
    --bg-main: #1e1e1e;
    --bg-panel: rgba(30, 30, 30, 0.85);
    --border-color: rgba(255, 255, 255, 0.1);
    
    --board-light: #f0d9b5;
    --board-dark: #b58863;
    --board-border: #4a2e15;
    
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    
    --primary: #3b82f6;
    --primary-glow: rgba(59, 130, 246, 0.5);
    
    --highlight-move: rgba(255, 255, 0, 0.4);
    --highlight-last: rgba(155, 199, 0, 0.4);
    --highlight-check: rgba(239, 68, 68, 0.8);
    
    --font-main: 'Outfit', sans-serif;
    --font-title: 'Cinzel', serif;
}

.theme-marble {
    --bg-main: #0f172a;
    --bg-panel: rgba(15, 23, 42, 0.85);
    --board-light: #e2e8f0;
    --board-dark: #64748b;
    --board-border: #1e293b;
    --primary: #8b5cf6;
    --primary-glow: rgba(139, 92, 246, 0.5);
}

.theme-cyber {
    --bg-main: #000000;
    --bg-panel: rgba(10, 10, 20, 0.9);
    --board-light: #1a1a2e;
    --board-dark: #16213e;
    --board-border: #0f3460;
    --primary: #00ffcc;
    --primary-glow: rgba(0, 255, 204, 0.5);
    --border-color: rgba(0, 255, 204, 0.2);
    --highlight-last: rgba(0, 255, 204, 0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-main);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

#three-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}

#app {
    position: relative; width: 100vw; height: 100vh; z-index: 1;
}

.screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: 0.4s ease; padding: 1rem;
}
.screen.active { opacity: 1; visibility: visible; }

.cinzel { font-family: var(--font-title); }
.logo-container { text-align: center; margin-bottom: 3rem; }
.logo { font-size: 3.5rem; font-family: var(--font-title); line-height: 1.1; }
.highlight { color: var(--primary); text-shadow: 0 0 20px var(--primary-glow); }
h2 { font-size: 2.5rem; margin-bottom: 1.5rem; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
h3 { font-size: 1.2rem; margin-bottom: 1rem; color: var(--text-muted); text-align: center; }

.text-gold { color: #fbbf24 !important; }
.text-blue { color: var(--primary) !important; }
.text-red { color: #ef4444 !important; }

/* Menus */
.stats-bar {
    display: flex; gap: 2rem; background: var(--bg-panel); padding: 0.8rem 2rem;
    border-radius: 30px; border: 1px solid var(--border-color); margin-bottom: 2.5rem;
    backdrop-filter: blur(10px);
}
.stat { display: flex; align-items: center; gap: 0.5rem; font-size: 1.2rem; font-weight: 600; }

.menu-buttons { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 320px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; max-width: 500px; }
.btn {
    background: var(--bg-panel); border: 1px solid var(--border-color);
    color: var(--text-main); padding: 1rem 1.5rem; font-size: 1.1rem; font-weight: 600;
    border-radius: 12px; cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 0.8rem;
    font-family: var(--font-main); backdrop-filter: blur(5px);
}
.btn:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
.btn.primary { background: var(--primary); border: none; color: #fff; box-shadow: 0 4px 15px var(--primary-glow); }
.btn.primary:hover { filter: brightness(1.1); }
.diff-btn { flex-direction: column; gap: 0.2rem; padding: 1rem; font-size: 1rem; }
.diff-desc { font-size: 0.8rem; color: var(--text-muted); font-weight: 400; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.text-center { text-align: center; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--primary-glow); } 70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }
.pulse { animation: pulse 2s infinite; }

/* Setup */
.color-select { display: flex; gap: 1rem; justify-content: center; }
.color-btn { 
    background: var(--bg-panel); border: 2px solid var(--border-color); border-radius: 12px;
    padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    color: var(--text-main); cursor: pointer; transition: 0.2s; font-weight: 600; width: 100px;
}
.color-btn.active { border-color: var(--primary); box-shadow: 0 0 15px var(--primary-glow); }
.color-preview { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #555; }
.color-preview.white { background: #fff; }
.color-preview.black { background: #111; }

/* Gameplay Layout */
.game-layout {
    display: flex; flex-direction: row; width: 100%; max-width: 1200px; height: 100%;
    align-items: center; justify-content: center; gap: 2rem; padding: 1rem;
}
@media (max-width: 900px) {
    .game-layout { flex-direction: column; gap: 1rem; justify-content: flex-start; padding-top: 2rem; overflow-y: auto; }
}

.game-sidebar { display: flex; flex-direction: column; gap: 1rem; width: 250px; height: 100%; max-height: 600px; }
@media (max-width: 900px) { .game-sidebar { width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; } }

.icon-btn { background: transparent; border: none; color: var(--text-main); font-size: 1.5rem; cursor: pointer; padding: 0.5rem; border-radius: 50%; transition: 0.2s; align-self: flex-start; }
.icon-btn:hover { background: rgba(255,255,255,0.1); }

.player-card { display: flex; align-items: center; gap: 1rem; background: var(--bg-panel); padding: 1rem; border-radius: 12px; border: 1px solid var(--border-color); }
.avatar { width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.player-info .name { font-weight: 700; font-size: 1.1rem; }
.player-info .rating { color: var(--text-muted); font-size: 0.9rem; }
.mt-auto { margin-top: auto; }
@media (max-width: 900px) { .mt-auto { margin-top: 0; } }

/* Eval Bar */
.eval-bar-container { display: flex; align-items: center; gap: 1rem; background: var(--bg-panel); padding: 0.5rem 1rem; border-radius: 12px; }
.eval-bar { flex: 1; height: 10px; background: #333; border-radius: 5px; overflow: hidden; position: relative; }
.eval-fill { position: absolute; left: 0; top: 0; height: 100%; width: 50%; background: #fff; transition: width 0.5s ease; }
.eval-text { font-family: monospace; font-weight: 700; width: 40px; text-align: right; }

/* Center Board */
.board-container-wrapper { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; perspective: 1000px; }
.board-controls-top, .board-controls-bottom { display: flex; justify-content: space-between; width: 100%; padding: 0 1rem; align-items: center; }
.timer { font-family: monospace; font-size: 1.5rem; font-weight: 700; background: var(--bg-panel); padding: 0.3rem 0.8rem; border-radius: 8px; }
.timer.active { color: var(--primary); box-shadow: 0 0 10px var(--primary-glow); }
.captured-pieces { display: flex; gap: 2px; height: 24px; }
.captured-pieces img { width: 20px; height: 20px; opacity: 0.8; }

.board-wrapper {
    position: relative;
    padding: 1.5rem;
    background: var(--board-border);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.5);
    transition: transform 0.5s ease;
}
.board-wrapper.view-3d {
    transform: rotateX(45deg) rotateZ(0deg) scale(0.9);
    box-shadow: 0 30px 40px rgba(0,0,0,0.6), inset 0 0 10px rgba(0,0,0,0.5);
}

.coord-files { position: absolute; bottom: 2px; left: 1.5rem; right: 1.5rem; display: flex; justify-content: space-around; font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.5); pointer-events: none; }
.coord-ranks { position: absolute; top: 1.5rem; bottom: 1.5rem; left: 2px; display: flex; flex-direction: column; justify-content: space-around; font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.5); pointer-events: none; }

.chess-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: clamp(280px, 80vmin, 560px);
    height: clamp(280px, 80vmin, 560px);
    border: 2px solid rgba(0,0,0,0.5);
}

.square {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.square.light { background-color: var(--board-light); }
.square.dark { background-color: var(--board-dark); }
.square.highlight-last { background-color: var(--highlight-last) !important; }
.square.highlight-move { cursor: pointer; }
.square.highlight-move::after {
    content: ''; position: absolute; width: 30%; height: 30%;
    background: rgba(0,0,0,0.2); border-radius: 50%;
}
.square.highlight-capture::after {
    content: ''; position: absolute; width: 85%; height: 85%;
    border: 4px solid rgba(0,0,0,0.2); border-radius: 50%; background: transparent;
}
.square.in-check { background-color: var(--highlight-check) !important; }

.piece {
    width: 90%; height: 90%;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    cursor: grab; z-index: 10; position: relative;
    transition: transform 0.2s;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.4));
}
.piece:active { cursor: grabbing; transform: scale(1.1); z-index: 20; }
.view-3d .piece { transform: rotateX(-45deg) translateY(-10%); filter: drop-shadow(0 10px 10px rgba(0,0,0,0.6)); }
.view-3d .piece:active { transform: rotateX(-45deg) translateY(-20%) scale(1.1); }

/* Right Sidebar */
.moves-container { flex: 1; background: var(--bg-panel); border-radius: 12px; border: 1px solid var(--border-color); display: flex; flex-direction: column; overflow: hidden; }
.moves-header { padding: 0.8rem; background: rgba(0,0,0,0.2); font-weight: 700; text-align: center; border-bottom: 1px solid var(--border-color); }
.moves-list { flex: 1; overflow-y: auto; padding: 0.5rem; display: grid; grid-template-columns: 2rem 1fr 1fr; gap: 0.2rem; align-content: flex-start; font-size: 0.9rem; }
.move-num { color: var(--text-muted); text-align: right; padding-right: 0.5rem; }
.move-text { cursor: pointer; padding: 0.2rem 0.5rem; border-radius: 4px; }
.move-text:hover { background: rgba(255,255,255,0.1); }

.tools-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.tool-btn {
    background: var(--bg-panel); border: 1px solid var(--border-color); color: var(--text-main);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0.8rem; border-radius: 12px; cursor: pointer; transition: 0.2s; font-size: 0.8rem;
}
.tool-btn:hover { background: rgba(255,255,255,0.1); }
.tool-btn .material-symbols-rounded { font-size: 1.5rem; margin-bottom: 0.2rem; }

/* Modals & Result */
.modal {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center;
    z-index: 100; opacity: 0; visibility: hidden; transition: 0.2s; backdrop-filter: blur(5px);
}
.modal.active { opacity: 1; visibility: visible; }
.modal-content { background: var(--bg-panel); padding: 2rem; border-radius: 16px; border: 1px solid var(--border-color); text-align: center; }
.promo-pieces { display: flex; gap: 1rem; margin-top: 1rem; }
.promo-piece { width: 60px; height: 60px; cursor: pointer; transition: 0.2s; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.promo-piece:hover { transform: scale(1.1); }

.result-subtitle { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 2rem; }
.result-card { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 20px; padding: 2rem; width: 100%; max-width: 400px; margin-bottom: 2rem; }
.result-row { display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 600; margin: 0.8rem 0; }
.divider { height: 1px; background: var(--border-color); margin: 1.5rem 0; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%; max-width: 500px; }
.stat-box { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.5rem; text-align: center; }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); margin-bottom: 0.5rem; }
.stat-label { font-size: 0.9rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }

.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 100%; max-width: 500px; max-height: 60vh; overflow-y: auto; padding-right: 5px; }
.theme-card { background: var(--bg-panel); border: 2px solid var(--border-color); border-radius: 16px; padding: 1rem; text-align: center; cursor: pointer; transition: 0.2s; }
.theme-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.theme-card.active { border-color: var(--primary); box-shadow: 0 0 15px var(--primary-glow); }
.theme-preview { height: 60px; border-radius: 8px; margin-bottom: 1rem; border: 1px solid rgba(0,0,0,0.5); display: flex; }
.tp-dark { flex: 1; height: 100%; }
.tp-light { flex: 1; height: 100%; }