:root{--bg-dark: #07080c;--panel-bg: rgba(16, 18, 25, .88);--panel-border: rgba(212, 175, 55, .22);--stone-border: #3b3a45;--gold-glow: #d4af37;--magic-blue: #00d2ff;--ruby-red: #ff3344;--text-main: #f0ebe1;--text-muted: #9c978e}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Cinzel,Trajan Pro,Georgia,serif;background-color:var(--bg-dark);color:var(--text-main);width:100vw;height:100vh;overflow:hidden;position:relative}#canvas3d-container{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}#canvas3d-container canvas{width:100%!important;height:100%!important;display:block;cursor:grab}#canvas3d-container canvas:active{cursor:grabbing}.top-hud{position:absolute;top:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:20px;background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:30px;padding:8px 24px;box-shadow:0 8px 24px #000000b3,0 0 15px #d4af3726;z-index:10}.game-title{font-size:1.3rem;letter-spacing:3px;text-transform:uppercase;color:#f7eed7;text-shadow:0 0 12px rgba(212,175,55,.5);display:flex;align-items:center;gap:8px}.turn-badge{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:700;padding-left:16px;border-left:1px solid rgba(255,255,255,.15)}.turn-dot{width:14px;height:14px;border-radius:50%;border:2px solid #666}.turn-dot.white{background:#f5f3eb;box-shadow:0 0 8px #ffffffe6}.turn-dot.black{background:#111;border-color:#888;box-shadow:0 0 8px #000000e6}.camera-toolbar{display:flex;gap:6px;padding-left:16px;border-left:1px solid rgba(255,255,255,.15)}.cam-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.15);color:#d1cbbe;font-size:.75rem;padding:5px 12px;border-radius:14px;cursor:pointer;transition:all .2s ease;font-family:inherit}.cam-btn:hover,.cam-btn.active{background:#d4af3740;border-color:var(--gold-glow);color:#fff;box-shadow:0 0 10px #d4af3766}.bottom-hint-bar{position:absolute;bottom:16px;left:50%;transform:translate(-50%);background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:8px 24px;font-size:.85rem;color:#d8d4c9;box-shadow:0 6px 20px #0009;z-index:10;display:flex;align-items:center;gap:16px}.floating-sidebar{position:absolute;top:16px;right:16px;bottom:16px;width:360px;display:flex;flex-direction:column;gap:12px;z-index:10;pointer-events:none}.panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--panel-border);border-radius:12px;padding:14px 16px;box-shadow:0 8px 24px #000000b3;pointer-events:auto}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1)}.panel-title{font-size:.95rem;letter-spacing:1px;color:#f0e6d2;font-weight:700}.badge{font-size:.7rem;padding:2px 8px;border-radius:10px;background:#2a2c36;color:var(--gold-glow);border:1px solid rgba(212,175,55,.3)}.badge.online{background:#00ff6426;color:#0f8;border-color:#0f8}.commentary-box{min-height:70px;max-height:110px;overflow-y:auto;background:#0a0b0fd9;border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:10px;font-family:Georgia,serif;font-style:italic;font-size:.88rem;line-height:1.45;color:#d1cbbe}.graveyards-wrapper{display:flex;justify-content:space-between;background:#0a0b0fb3;border-radius:8px;padding:8px 12px}.graveyard-section{display:flex;flex-direction:column;gap:2px}.graveyard-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase}.graveyard{display:flex;flex-wrap:wrap;gap:2px;font-size:1.1rem;min-height:22px;max-width:140px}.piece.white{color:#fff9e6}.piece.black{color:#555866}.controls-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}button{background:linear-gradient(180deg,#2a2c38,#1c1e26);color:var(--text-main);border:1px solid #444554;padding:8px 12px;border-radius:6px;font-family:inherit;font-size:.8rem;letter-spacing:.5px;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:6px}button:hover{background:linear-gradient(180deg,#383b4c,#262934);border-color:var(--gold-glow);box-shadow:0 0 8px #d4af374d;transform:translateY(-1px)}button.primary{background:linear-gradient(180deg,#8a2525,#5a1414);border-color:#ba3838}button.primary:hover{background:linear-gradient(180deg,#aa2e2e,#701919);box-shadow:0 0 10px #ff3c3c66}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s ease}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-content{background:linear-gradient(180deg,#222530,#14161e);border:2px solid var(--gold-glow);box-shadow:0 0 40px #d4af374d;border-radius:12px;padding:32px;text-align:center;max-width:440px}.modal-title{font-size:2rem;color:var(--gold-glow);margin-bottom:12px}.modal-msg{font-size:1.1rem;margin-bottom:24px}