: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;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#canvas3d-container{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1;touch-action:none}#canvas3d-container canvas{width:100%!important;height:100%!important;display:block;cursor:grab;touch-action:none}#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}.hud-action-btn{background:#d4af371f;border:1px solid rgba(212,175,55,.35);color:gold;font-size:.8rem;font-weight:600;padding:4px 10px;border-radius:6px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.hud-action-btn:hover{background:#d4af3747;border-color:gold;box-shadow:0 0 10px #d4af3766;transform:translateY(-1px)}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#040508e0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease}.modal-overlay.active{opacity:1;visibility:visible;pointer-events:auto}#confirm-modal{z-index:2000}.modal-content{background:linear-gradient(180deg,#1c1f2b,#0f1118);border:2px solid var(--gold-glow);box-shadow:0 0 50px #d4af374d,0 20px 60px #000000e6;border-radius:14px;padding:32px;text-align:center;max-width:440px;position:relative}.modal-title{font-size:2rem;color:var(--gold-glow);margin-bottom:12px}.modal-msg{font-size:1.1rem;margin-bottom:24px}.welcome-card{max-width:520px;width:90vw;padding:36px 32px;display:flex;flex-direction:column;align-items:center;border:2px solid rgba(212,175,55,.45);box-shadow:0 0 60px #d4af3740,0 30px 80px #000000f2;animation:welcomeAppear .5s cubic-bezier(.16,1,.3,1)}@keyframes welcomeAppear{0%{transform:scale(.94) translateY(12px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.welcome-title{font-size:2.3rem;letter-spacing:2px;color:#f7eed7;text-shadow:0 0 20px rgba(212,175,55,.6);margin-bottom:4px}.welcome-subtitle{font-size:1rem;color:#d4af37;font-weight:600;letter-spacing:1px;margin-bottom:20px;line-height:1.4}.welcome-disclaimer{background:#080a0fbf;border:1px solid rgba(212,175,55,.25);border-radius:8px;padding:14px 16px;margin-bottom:20px;text-align:left}.disclaimer-header{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:1px;color:gold;margin-bottom:6px}.disclaimer-text{font-size:.76rem;line-height:1.5;color:#a49e91;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.welcome-status{display:flex;align-items:center;justify-content:center;gap:8px;background:#d4af3726;border:1px solid rgba(212,175,55,.5);border-radius:20px;padding:8px 18px;margin-bottom:20px;color:gold;font-size:.88rem;font-weight:600;box-shadow:0 0 15px #d4af3733}.welcome-actions{display:flex;gap:12px;width:100%;justify-content:center;flex-wrap:wrap}.welcome-btn{flex:1;min-width:170px;padding:12px 20px;font-size:.95rem;font-weight:700;justify-content:center;border-radius:8px;cursor:pointer;pointer-events:auto;position:relative;z-index:10}.welcome-ai-config{width:100%;background:#080a0fbf;border:1px solid rgba(212,175,55,.35);border-radius:8px;padding:12px 16px;margin-bottom:20px;text-align:left}.ai-config-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.ai-level-num-badge{font-size:.75rem;font-weight:700;background:#d4af3733;color:gold;border:1px solid rgba(212,175,55,.5);padding:2px 8px;border-radius:12px}.gothic-slider{width:100%;accent-color:#ffd700;cursor:pointer;margin:6px 0}.ai-config-desc{font-size:.82rem;color:#d4af37;font-weight:600;margin-top:4px}.hud-ai-pill{display:flex;align-items:center;gap:6px;background:#d4af371f;border:1px solid rgba(212,175,55,.4);padding:4px 10px;border-radius:16px;font-size:.8rem;color:#c4beaf;font-weight:600}.hud-ai-num{color:gold;font-weight:700}.hamburger-btn{display:none;align-items:center;justify-content:center;background:#d4af3726;border:1px solid rgba(212,175,55,.4);color:gold;font-size:1.2rem;width:36px;height:36px;border-radius:8px;cursor:pointer;padding:0;transition:all .2s ease}.hamburger-btn:hover{background:#d4af374d;box-shadow:0 0 10px #d4af3766}.mobile-drawer-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#040508b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:500;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.mobile-drawer-overlay.active{opacity:1;visibility:visible}.mobile-drawer{position:fixed;top:0;right:-340px;width:320px;max-width:85vw;height:100vh;background:linear-gradient(180deg,#1c1f2b,#0f1118);border-left:2px solid var(--gold-glow);box-shadow:-10px 0 40px #000000d9;z-index:501;display:flex;flex-direction:column;transition:right .35s cubic-bezier(.16,1,.3,1)}.mobile-drawer.active{right:0}.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(212,175,55,.25)}.drawer-title{font-size:1.05rem;color:gold;font-weight:700;letter-spacing:1px}.drawer-close-btn{background:none;border:none;color:#a8a49c;font-size:1.2rem;cursor:pointer;padding:4px}.drawer-close-btn:hover{color:#fff}.drawer-body{padding:16px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;flex:1}.drawer-section{background:#080a0f99;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px 14px}.drawer-section-title{font-size:.82rem;font-weight:700;color:gold;letter-spacing:1px;margin-bottom:8px}.drawer-row{display:flex;align-items:center;font-size:.8rem}.combat-cam-frame{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:50;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}.combat-cam-frame.active{opacity:1;visibility:visible}.combat-cam-header{position:absolute;top:18px;left:50%;transform:translate(-50%) translateY(-10px);z-index:52;opacity:0;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .35s ease}.combat-cam-frame.active .combat-cam-header{transform:translate(-50%) translateY(0);opacity:1}.combat-cam-badge{font-size:.82rem;letter-spacing:2px;font-weight:700;background:#b41414d9;color:#fff;border:1px solid rgba(255,80,80,.6);padding:5px 14px;border-radius:20px;box-shadow:0 0 20px #ff1e1e99;animation:pulseCombat 1s infinite alternate}@keyframes pulseCombat{0%{box-shadow:0 0 10px #ff1e1e66}to{box-shadow:0 0 25px #ff3c3ccc}}.combat-letterbox{position:absolute;left:0;width:100vw;height:10vh;background:#040508e0;border-bottom:2px solid rgba(212,175,55,.4);z-index:51;transition:transform .35s cubic-bezier(.16,1,.3,1)}.combat-letterbox.top{top:0;transform:translateY(-100%)}.combat-cam-frame.active .combat-letterbox.top{transform:translateY(0)}.combat-letterbox.bottom{bottom:0;border-bottom:none;border-top:2px solid rgba(212,175,55,.4);transform:translateY(100%)}.combat-cam-frame.active .combat-letterbox.bottom{transform:translateY(0)}@media (max-width: 768px){.floating-sidebar,.camera-toolbar,.desktop-brightness,.desktop-new-game,#studio-btn-container{display:none!important}.hamburger-btn{display:flex!important}.top-hud{padding:8px 14px;gap:8px;justify-content:space-between;width:calc(100vw - 28px)}.game-title{font-size:.95rem}.game-title-text{display:inline-block}.turn-badge{padding:3px 8px;font-size:.76rem}.hud-ai-pill{padding:3px 8px;font-size:.74rem}.bottom-hint-bar{padding:5px 12px;font-size:.75rem}.hint-divider,.hint-orbit{display:none!important}}