:root{--primary-color: #663399;--accent-color: #c78c34;--button-color: #6a0dad;--button-hover: #9b4f96;--button-active: #5a0c83;--text-light: #fff;--transition-smooth: .3s cubic-bezier(.4, 0, .2, 1);--shadow-sm: 0 2px 4px rgba(0,0,0,.2);--shadow-md: 0 4px 6px rgba(0,0,0,.2);--shadow-lg: 0 6px 12px rgba(0,0,0,.3)}*{margin:0;padding:0;box-sizing:border-box;font-family:Helvetica,Arial,sans-serif}body{margin:0;background:linear-gradient(to bottom,rgb(43,20,53),var(--primary-color));-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-y:auto}.display-none{display:none}#cameraPosition{color:var(--text-light);margin-left:100px}#container{width:100vw;height:100vh}.chesspiece{position:absolute;display:none;background:var(--text-light);padding:30px;border-radius:30px;top:50%;left:50%;transform:translate(-50%,-50%);flex-direction:column;align-items:center;box-shadow:var(--shadow-md);max-width:600px;width:97%}.chesspiece h3{font-size:1.2rem}.chesspiece ul{width:100%;max-width:70%;list-style-type:none}.chesspiece hr{margin:10px 0;border:none;border-top:1px solid rgba(0,0,0,.1)}.closeDialogButton{position:absolute;right:18px;width:40px;height:40px;background-color:var(--button-color);color:var(--text-light);border:none;border-radius:50%;cursor:pointer;transition:all var(--transition-smooth);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center}.closeDialogButton:hover{background-color:var(--button-hover);box-shadow:var(--shadow-lg)}.closeDialogButton:active{background-color:var(--button-active);box-shadow:var(--shadow-sm)}.closeDialogButton svg{width:20px;height:20px;fill:var(--text-light)}.header-bar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#0000004d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.1);z-index:100}.controls{display:flex;align-items:center;gap:12px;color:var(--text-light)}.controls p{margin:0;font-size:.9rem;font-weight:400;letter-spacing:.5px}.controls-left{display:flex;flex-direction:column;gap:10px;color:var(--text-light);font-size:1rem;max-width:80vw;text-align:center;margin-top:20px}.toggle{position:relative;width:48px;height:26px;display:inline-block;flex-shrink:0}.toggle input{display:none}.slider{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#fff3;transition:var(--transition-smooth);border-radius:26px;border:1px solid rgba(255,255,255,.3);cursor:pointer;will-change:background-color}.slider:before{content:"";position:absolute;height:20px;width:20px;left:2px;bottom:2px;background:var(--text-light);transition:var(--transition-smooth);border-radius:50%;box-shadow:0 2px 4px #0003;will-change:transform}input:checked+.slider{background-color:#fff6;border-color:#ffffff80}input:checked+.slider:before{transform:translate(20px)}.tap-to-start{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;color:var(--text-light);display:none;justify-content:center;align-items:center;z-index:1000;cursor:pointer}.tap-to-start-content{display:flex;flex-direction:column;align-items:center;justify-content:center}.tap-to-start-title{font-size:2rem;margin-bottom:10px}.attribution-link{color:var(--text-light);text-decoration:none;font-size:.9rem;font-weight:400;letter-spacing:.5px;transition:all .3s ease;opacity:.9}.attribution-link:hover{opacity:1;letter-spacing:1px}@media (max-width: 768px){.tap-to-start{display:flex}.header-bar{padding:12px 16px}.controls p{font-size:.8rem}.attribution-link{font-size:.75rem}.toggle{width:42px;height:22px}.slider:before{height:16px;width:16px}input:checked+.slider:before{transform:translate(18px)}.chesspiece{top:auto;bottom:8px;transform:translate(-50%);height:50%;overflow:hidden;padding:20px}.chesspiece h3{font-size:1.5rem}.chesspiece ul{max-width:100%;overflow-y:auto}.chesspiece hr{margin:5px 0}}.dialogHeader{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:20px}.dialogHeader h3{flex-grow:1;text-align:center;margin:0}.debug-toggle{position:fixed;bottom:20px;right:20px;width:50px;height:50px;border-radius:50%;background:#663399e6;border:2px solid rgba(255,255,255,.3);color:#fff;font-size:24px;cursor:pointer;z-index:1000;transition:all .3s ease;box-shadow:0 4px 12px #0000004d}.debug-toggle:hover{background:#639;transform:scale(1.1)}.debug-panel{position:fixed;top:50%;right:20px;transform:translateY(-50%);width:320px;max-height:80vh;background:#14141ef2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:12px;box-shadow:0 8px 32px #00000080;z-index:1001;overflow:hidden}.debug-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#639c;border-bottom:1px solid rgba(255,255,255,.2)}.debug-header h3{margin:0;color:#fff;font-size:1.1rem;font-weight:600}.debug-close{background:transparent;border:none;color:#fff;font-size:28px;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s ease}.debug-close:hover{background:#fff3}.debug-content{padding:20px;max-height:calc(80vh - 60px);overflow-y:auto}.debug-section{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1)}.debug-section:last-of-type{border-bottom:none}.debug-section h4{color:#c78c34;font-size:.95rem;margin-bottom:12px;font-weight:600}.debug-section label{display:block;color:#ffffffe6;font-size:.85rem;margin-bottom:6px;margin-top:10px}.debug-section label span{float:right;color:#c78c34;font-weight:600}.debug-section input[type=range]{width:100%;height:6px;border-radius:3px;background:#fff3;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.debug-section input[type=range]::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#c78c34;cursor:pointer;transition:all .2s ease}.debug-section input[type=range]::-webkit-slider-thumb:hover{background:#c78c34;transform:scale(1.2)}.debug-section input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#c78c34;cursor:pointer;border:none;transition:all .2s ease}.debug-section input[type=range]::-moz-range-thumb:hover{background:#c78c34;transform:scale(1.2)}.debug-copy-btn{width:100%;padding:12px;background:#639c;border:1px solid rgba(255,255,255,.3);border-radius:6px;color:#fff;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:10px}.debug-copy-btn:hover{background:#639;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.debug-copy-btn:active{transform:translateY(0)}@media (max-width: 768px){.debug-panel{right:10px;left:10px;width:auto;max-height:70vh}.debug-toggle{bottom:80px;right:15px;width:45px;height:45px;font-size:20px}}.title-section{position:relative;width:100%;height:35vh;min-height:300px}#titleContainer{width:100%;height:100%}.game-section{position:relative;width:100%;height:65vh;min-height:500px;display:flex;flex-direction:column}#chessContainer{flex:1;width:100%;position:relative}.game-controls{position:absolute;top:16px;left:50%;transform:translate(-50%);z-index:50}.game-mode-selector{display:flex;gap:6px;background:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:8px;padding:4px;border:1px solid rgba(255,255,255,.15);justify-self:center}.mode-btn{padding:6px 14px;background:transparent;border:none;color:#ffffffb3;font-size:.8rem;font-weight:500;cursor:pointer;border-radius:6px;transition:all .3s ease;letter-spacing:.5px;white-space:nowrap}.mode-btn:hover{color:#ffffffe6;background:#ffffff1a}.mode-btn.active{background:#fff3;color:#fff}.game-bar{position:fixed;width:100%;bottom:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 24px;background:#00000080;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.15);gap:24px;min-height:60px;visibility:hidden}.player-info{display:flex;align-items:center;gap:16px}.player-info.player-white{justify-content:flex-start}.player-info.player-black{justify-content:flex-end}.player-header{display:flex;align-items:center;gap:10px}.player-name{background:#ffffff1f;border:1px solid rgba(255,255,255,.25);border-radius:6px;padding:6px 10px;color:#fff;font-size:1.1rem;font-weight:700;text-align:center;width:65px;text-transform:uppercase;letter-spacing:2px;transition:all .3s ease}.player-name:focus{outline:none;border-color:#ffffff80;background:#fff3}.player-label{font-size:.8rem;opacity:.65;text-transform:uppercase;letter-spacing:.5px;font-weight:500;color:#fff}.player-score{display:flex;align-items:center;gap:8px;font-size:.85rem}.score-label{display:none}.captured-pieces{display:flex;gap:3px;flex-wrap:nowrap;align-items:center;max-width:100px;overflow:hidden}.captured-piece{width:18px;height:18px;font-size:14px;display:flex;align-items:center;justify-content:center;opacity:.9}.material-score{font-size:1rem;font-weight:700;padding:4px 10px;background:#ffffff26;border-radius:6px;min-width:35px;text-align:center;border:1px solid rgba(255,255,255,.25)}.game-status{display:flex;align-items:center;flex-direction:column;gap:12px;justify-self:center}.turn-indicator{font-size:2.95rem;color:#fff}.reset-btn{padding:8px 16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.25);border-radius:6px;color:#fff;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .3s ease;letter-spacing:.5px;white-space:nowrap}.reset-btn:hover{background:#fff3;border-color:#fff6;transform:translateY(-1px);box-shadow:0 2px 6px #0003}.reset-btn:active{transform:translateY(0)}@media (max-width: 768px){.title-section{height:30vh;min-height:250px}.game-section{height:70vh}.game-bar{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:10px 16px;gap:10px}.player-info{width:100%;justify-content:space-between!important}.player-header{flex-shrink:0}.player-score{flex-wrap:nowrap;gap:6px}.game-mode-selector{order:2;justify-self:stretch;width:100%}.player-info.player-white{order:1}.player-info.player-black{order:3}.mode-btn{flex:1}.player-name{font-size:1rem;width:55px;padding:5px 8px}.player-label{font-size:.75rem}.turn-indicator{font-size:1.85rem;padding:6px 12px;min-width:auto}.reset-btn{font-size:.8rem;padding:6px 12px}.material-score{font-size:.9rem;padding:3px 8px;min-width:30px}.captured-piece{width:16px;height:16px;font-size:12px}.game-controls{top:8px}.player-name{font-size:1rem;width:60px}}
