:root{--cell-size: 80px;--board-size: calc(8 * var(--cell-size));--primary-color: #2c3e50;--secondary-color: #34495e;--accent-color: #3498db;--panel-width: 256px}:root,[data-theme=classic]{--white-ion: #ecf0f1;--black-ion: #2c3e50;--node-color: #e74c3c;--board-color: #d1e6f9;--board-hover: #a8c3e8;--background-color: #ecf0f1}[data-theme=dark]{--white-ion: #ecf0f1;--black-ion: #2c3e50;--node-color: #e74c3c;--board-color: #34495e;--board-hover: #3d566e;--background-color: #2c3e50}[data-theme=high-contrast]{--white-ion: #ffffff;--black-ion: #000000;--node-color: #ff0000;--board-color: #ffffff;--board-hover: #666666;--background-color: #ffffff}[data-theme=nature]{--white-ion: #e8f3e6;--black-ion: #2d5a27;--node-color: #d35400;--board-color: #c8e6c9;--board-hover: #81c784;--background-color: #e8f5e8}[data-theme=felt]{--white-ion: #f8f9fa;--black-ion: #721c24;--node-color: #ffc107;--board-color: #1a6b3a;--board-hover: #22a05c;--background-color: #0d4d21}*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{display:flex;flex-direction:column;align-items:center;min-height:100vh;background:var(--background-color);padding:20px;overflow-x:hidden;overflow-y:auto;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:background-color .3s ease}.header{width:100%;max-width:1200px;margin-bottom:20px}.header-content{display:flex;justify-content:space-between;align-items:center;padding:0 20px}.game-title{font-size:2.25rem;color:var(--primary-color);text-transform:uppercase;font-weight:700;font-family:Russo One,Segoe UI,sans-serif;text-align:center;flex:1}.user-info{display:flex;align-items:center;gap:10px}.login-btn{background:var(--accent-color);color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s ease}.login-btn:hover{background:#2980b9}.game-container{display:flex;gap:30px;max-width:1200px;width:100%;align-items:flex-start;margin-bottom:40px}.board-section{flex:1;display:flex;flex-direction:column;align-items:center}.player-info{display:flex;justify-content:space-between;align-items:center;width:var(--board-size);padding:12px 20px;border-radius:8px;margin:10px 0;position:relative;overflow:hidden;border:2px solid transparent;background:var(--secondary-color);color:#fff;opacity:.7;transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1),border-color .8s cubic-bezier(.4,0,.2,1),box-shadow .8s cubic-bezier(.4,0,.2,1),background-color .8s cubic-bezier(.4,0,.2,1),color .8s cubic-bezier(.4,0,.2,1)}.player-info:before{content:"";position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,transparent 0%,rgba(52,152,219,.3) 50%,transparent 100%);transition:width .3s ease}.player-info--active{opacity:1;transform:scale(1.02);border-color:var(--accent-color);box-shadow:0 0 20px #3498db4d,0 3px 8px #00000026,inset 0 1px #ffffff1a;background:linear-gradient(135deg,#fffffffa,#ecf0f1fa);color:var(--primary-color)}.player-info--active:before{width:100%;animation:slideGlow 3s ease-in-out infinite}@keyframes slideGlow{0%,to{transform:translate(-100%);opacity:0}50%{transform:translate(0);opacity:1}}.player-details{display:flex;flex-direction:column;gap:4px;z-index:1;position:relative}.player-name{font-weight:700;font-size:1.1em;text-shadow:0 1px 2px rgba(0,0,0,.2)}.player-score{font-size:.9em;opacity:.9}.player-info--active .player-name{text-shadow:0 1px 3px rgba(0,0,0,.1);font-weight:700}.turn-indicator{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.8) 0%,var(--accent-color) 40%,color-mix(in srgb,var(--accent-color) 80%,black) 100%);opacity:.2;transition:all .8s cubic-bezier(.4,0,.2,1);border:2px solid rgba(255,255,255,.3);position:relative;z-index:1}.turn-indicator--active{opacity:1;transform:scale(1.2);box-shadow:0 0 20px var(--accent-color),0 0 40px #3498db80;animation:pulse 2s infinite;border-color:#fffc}.turn-indicator--active:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;background:radial-gradient(circle,transparent 40%,rgba(52,152,219,.4) 70%,transparent 100%);animation:ripple 2s infinite}@keyframes ripple{0%{transform:scale(.8);opacity:1}to{transform:scale(1.5);opacity:0}}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.7}}.board-container{display:flex;align-items:center;gap:10px}.board-labels{display:flex;flex-direction:column;gap:0}.board-labels--left,.board-labels--right{height:var(--board-size);justify-content:space-around}.board-labels--bottom{flex-direction:row;width:var(--board-size);justify-content:space-around;margin-top:5px}.board-labels .label{width:var(--cell-size);height:var(--cell-size);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--primary-color);font-size:.9em}.board-labels--bottom .label{height:30px}.game-board{display:grid;grid-template-columns:repeat(8,var(--cell-size));grid-template-rows:repeat(8,var(--cell-size));gap:0;background:linear-gradient(135deg,#2c3e50,#34495e);padding:3px;border-radius:8px;box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a,inset 0 -1px #0000004d;position:relative;transition:all .3s ease}.game-board--playback{opacity:.95;box-shadow:0 8px 32px #ffc1074d,inset 0 1px #ffffff1a,inset 0 -1px #0000004d;border:2px solid #ffc107}.game-board:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,transparent 50%,rgba(0,0,0,.1) 100%);pointer-events:none}.board-cell{width:var(--cell-size);height:var(--cell-size);background:linear-gradient(135deg,var(--board-color) 0%,color-mix(in srgb,var(--board-color) 95%,black) 100%);border:1px solid rgba(0,0,0,.1);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:all .2s ease;overflow:hidden}.board-cell:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,.02) 10px,rgba(255,255,255,.02) 20px);pointer-events:none}.board-cell:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 1px 2px #00000014,inset 0 -1px 1px #ffffff08;pointer-events:none}.board-cell:hover{background:linear-gradient(135deg,var(--board-hover) 0%,color-mix(in srgb,var(--board-hover) 90%,black) 100%);box-shadow:0 0 0 1px #0000000d}.board-cell--disabled{cursor:not-allowed;opacity:.7}.board-cell--last-move{background:#a8e6cf;box-shadow:inset 0 0 10px #0003}.game-piece{width:72%;height:72%;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;animation:piecePlace .4s cubic-bezier(.4,0,.2,1);transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 4px 8px #00000040,0 2px 4px #00000026,0 8px 16px #0000001a;transform:translateZ(0)}@keyframes piecePlace{0%{transform:scale(.5) translateY(-10px);opacity:0}50%{transform:scale(1.1) translateY(2px)}to{transform:scale(1) translateY(0);opacity:1}}.game-piece--white{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.8) 0%,transparent 50%),radial-gradient(circle at 60% 60%,rgba(248,249,250,.6) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(233,236,239,.4) 0%,transparent 40%),linear-gradient(145deg,#fff,#f8f9fa 40%,#e9ecef);border:1px solid rgba(0,0,0,.08);box-shadow:0 4px 8px #00000026,0 1px 3px #0000001a,inset 0 1px 2px #ffffffe6,inset 0 -3px 5px #0000000d;position:relative}.game-piece--white:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;background:radial-gradient(ellipse at 20% 40%,transparent 40%,rgba(206,212,218,.1) 50%,transparent 52%),radial-gradient(ellipse at 60% 70%,transparent 40%,rgba(206,212,218,.08) 50%,transparent 52%),radial-gradient(ellipse at 80% 30%,transparent 45%,rgba(206,212,218,.06) 50%,transparent 52%);pointer-events:none}.game-piece--black{background:radial-gradient(circle at 30% 30%,rgba(73,80,87,.5) 0%,transparent 50%),radial-gradient(circle at 70% 60%,rgba(52,58,64,.4) 0%,transparent 50%),radial-gradient(circle at 20% 80%,rgba(33,37,41,.3) 0%,transparent 40%),linear-gradient(145deg,#495057,#343a40 40%,#212529);border:1px solid rgba(0,0,0,.3);box-shadow:0 4px 8px #00000040,0 1px 3px #00000026,inset 0 1px 1px #ffffff1a,inset 0 -3px 5px #0000004d;position:relative}.game-piece--black:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,transparent 70%,rgba(0,0,0,.15) 100%);pointer-events:none}@keyframes shimmer{0%{opacity:.9}50%{opacity:1}to{opacity:.9}}.game-piece--white:after,.game-piece--black:after{content:"";position:absolute;top:18%;left:25%;width:20%;height:20%;border-radius:50%;pointer-events:none}.game-piece--white:after{background:radial-gradient(circle,rgba(255,255,255,.6) 0%,transparent 70%);filter:blur(2px);animation:shimmer 4s ease-in-out infinite}.game-piece--black:after{background:radial-gradient(circle at center,rgba(255,255,255,.08) 0%,rgba(255,255,255,.05) 30%,transparent 70%);filter:blur(1px);animation:shimmer 5s ease-in-out infinite}.board-cell:not(.board-cell--disabled):hover .game-piece{transform:translateY(-3px);filter:drop-shadow(0 5px 8px rgba(0,0,0,.3)) drop-shadow(0 3px 4px rgba(0,0,0,.2))}.board-cell:not(.board-cell--disabled):active .game-piece{transform:translateY(0);filter:drop-shadow(0 1px 2px rgba(0,0,0,.2)) drop-shadow(0 0px 1px rgba(0,0,0,.15))}.game-piece--yugo{position:relative}.yugo-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;pointer-events:none}.yugo-indicator--single{width:18px;height:18px;background:radial-gradient(circle at 30% 30%,#ff6b6b,#dc3545,#a71e2e);border-radius:50%;box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #ffffff4d,inset 0 -1px 2px #0003}.yugo-indicator--double{width:24px;height:16px;background:radial-gradient(ellipse at 30% 30%,#ff6b6b,#dc3545,#a71e2e);border-radius:50%;box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #ffffff4d,inset 0 -1px 2px #0003}.yugo-indicator--triple{width:20px;height:20px;background:linear-gradient(to bottom,#ff6b6b,#dc3545,#a71e2e);clip-path:polygon(50% 0%,0% 100%,100% 100%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}.yugo-indicator--quadruple{width:20px;height:20px;background:linear-gradient(135deg,#ff6b6b,#dc3545,#a71e2e);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #ffffff4d,inset 0 -1px 2px #0003}@keyframes yugoPulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}.yugo-indicator--single,.yugo-indicator--double,.yugo-indicator--triple{animation:yugoPulse 3s ease-in-out infinite}.yugo-indicator--quadruple{animation:yugoDiamondPulse 3s ease-in-out infinite}@keyframes yugoDiamondPulse{0%,to{transform:translate(-50%,-50%) rotate(45deg) scale(1)}50%{transform:translate(-50%,-50%) rotate(45deg) scale(1.1)}}.board-cell--nexus{animation:nexusPulse 2s infinite;border:3px solid gold!important}@keyframes nexusPulse{0%,to{box-shadow:0 0 10px gold;border-color:gold}50%{box-shadow:0 0 20px gold,0 0 30px gold;border-color:#ffed4e}}.controls-panel{width:var(--panel-width);display:flex;flex-direction:column;gap:16px;background:transparent;padding:0}.controls-section{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #00000014,0 1px 2px #0000000a;border:1px solid rgba(0,0,0,.06)}.controls-section h3{color:var(--primary-color);margin:0 0 16px;font-size:.95em;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:0 0 12px;border-bottom:1px solid rgba(52,152,219,.2);display:flex;align-items:center;gap:8px}.control-btn{width:100%;padding:12px 16px;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:.95em;transition:all .2s ease;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}.control-btn:last-child{margin-bottom:0}.control-btn--primary{background:var(--accent-color);color:#fff}.control-btn--primary:hover{background:#2980b9;transform:translateY(-1px)}.control-btn--secondary{background:var(--secondary-color);color:#fff}.control-btn--secondary:hover{background:#2c3e50}.control-btn--accent{background:#27ae60;color:#fff}.control-btn--accent:hover{background:#2ecc71;transform:translateY(-1px)}.control-btn:disabled{opacity:.5;cursor:not-allowed}.move-history{max-height:200px;overflow-y:auto;background:#f8f9fa;border-radius:4px;padding:10px;font-family:Courier New,monospace;font-size:.9em}.move-entry{padding:4px 8px;border-bottom:1px solid #eee;cursor:pointer;transition:background-color .2s ease}.move-entry:hover{background:#e9ecef}.move-entry--current{background:#d1ecf1;font-weight:700;border-left:3px solid var(--accent-color)}.move-entry:last-child{border-bottom:none}.playback-controls{display:flex;gap:4px;margin-bottom:10px;padding:8px;background:#f8f9fa;border-radius:6px}.playback-btn{flex:1;padding:8px 4px;background:#fff;border:1px solid #dee2e6;border-radius:4px;cursor:pointer;font-size:.9em;font-weight:600;color:var(--primary-color);transition:all .2s ease;min-width:32px}.playback-btn:hover:not(:disabled){background:var(--accent-color);color:#fff;border-color:var(--accent-color);transform:translateY(-1px)}.playback-btn:active:not(:disabled){transform:translateY(0)}.playback-btn:disabled{opacity:.4;cursor:not-allowed}.playback-btn--live{background:#28a745;color:#fff;border-color:#28a745;font-size:.8em}.playback-btn--live:hover:not(:disabled){background:#218838;border-color:#1e7e34}.playback-btn--live.inactive{background:#6c757d;border-color:#6c757d}.playback-position{text-align:center;font-size:.9em;color:#6c757d;margin-bottom:10px;padding:6px;background:#f8f9fa;border-radius:4px}.playback-position--history{background:#fff3cd;color:#856404;font-weight:500}.setting-group{display:flex;flex-direction:column;gap:5px}.setting-group label{font-weight:500;color:var(--primary-color)}.theme-selector{padding:8px;border:1px solid #ddd;border-radius:4px;background:#fff;cursor:pointer}.game-status{text-align:center;padding:16px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;color:#fff}.status-text{font-weight:500;color:#fff;margin-bottom:10px;font-size:1.05em}.connection-status{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.9em}.status-indicator{width:10px;height:10px;border-radius:50%;background:#27ae60}.status-indicator--disconnected{background:#e74c3c}.loading-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#fffffff2;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.loading-content{text-align:center;color:var(--primary-color)}.loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-screen.hidden{display:none}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1001;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal-overlay.hidden{display:none}.modal{background:#fff;border-radius:8px;box-shadow:0 10px 30px #0000004d;max-width:400px;width:90%;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #eee}.modal-header h2{color:var(--primary-color);margin:0}.modal-close{background:none;border:none;font-size:1.5em;cursor:pointer;color:#999;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.modal-close:hover{color:var(--primary-color)}.modal-body{padding:20px}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-weight:500;color:var(--primary-color)}.form-group input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:1em}.form-group input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 5px #3498db4d}.form-actions{display:flex;gap:10px;margin-top:20px}.form-help{display:block;font-size:.8em;color:#666;margin-top:4px;font-style:italic}.game-id-display{margin-top:8px}.game-id-display label{display:block;font-size:.85em;font-weight:600;color:var(--primary-color);margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px;opacity:.8}.game-id-value{display:flex;gap:8px;align-items:stretch;width:100%}.game-id-value input{flex:1;min-width:0;font-family:Courier New,monospace;font-size:.95em;font-weight:500;background:#f8f9fa;border:1px solid rgba(0,0,0,.1);border-radius:6px;padding:10px 12px;color:var(--primary-color);letter-spacing:.5px}.game-id-value input:focus{outline:none;border-color:var(--accent-color);background:#fff}.copy-btn{background:var(--accent-color);color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-size:1.1em;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:44px}.copy-btn:hover{background:#2980b9;transform:translateY(-1px)}.copy-btn:active{transform:translateY(0)}.error-message{background:#f8d7da;color:#721c24;padding:10px;border-radius:4px;border:1px solid #f5c6cb;margin-top:15px;font-size:.9em}.stats-container{display:flex;gap:16px;align-items:stretch}.player-stats{flex:1;padding:12px;border-radius:8px;background:#f8f9fa}.player-stats--white{background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}.player-stats--black{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.stats-player-name{font-weight:600;font-size:1.1em;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,.1)}.player-stats--black .stats-player-name{border-bottom-color:#fff3}.stats-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0}.stats-label{font-size:.9em;opacity:.8}.stats-value{font-size:1.2em;font-weight:600}.stats-divider{width:1px;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.1),transparent);margin:0 -8px}@media (max-width: 1100px){.game-container{flex-direction:column;align-items:center}.controls-panel{width:100%;max-width:var(--board-size);max-height:none;margin-top:20px}}@media (max-width: 768px){:root{--cell-size: min(11vw, 50px);--panel-width: 100%}body{padding:10px 5px}.game-title{font-size:1.6rem}.header-content{flex-direction:column;gap:10px;padding:0 10px}.board-container{flex-direction:column}.board-labels--left,.board-labels--right{display:none}.board-labels--bottom{margin-top:8px}.board-labels .label{font-size:.75em;width:var(--cell-size)}.player-info{width:100%;max-width:calc(8 * var(--cell-size));padding:10px 12px;font-size:.85em;margin:8px 0}.player-name{font-size:1em}.player-score{font-size:.85em}.controls-panel{padding:12px;border-radius:8px 8px 0 0;box-shadow:0 -2px 10px #0000001a}.controls-section h3{font-size:1em}.control-btn{padding:10px;font-size:.9em}.move-history{max-height:120px;font-size:.8em}.game-board{padding:2px;gap:0}.board-cell{border-width:.5px}.game-piece{width:75%;height:75%}.yugo-indicator{width:16px;height:16px;font-size:.6em;top:-3px;right:-3px}}@media (max-width: 480px){:root{--cell-size: min(11.5vw, 42px)}body{padding:5px 0}.header{margin-bottom:10px}.game-title{font-size:1.4rem}.user-info{font-size:.85em}.login-btn{padding:6px 12px;font-size:.85em}.player-score{display:none}.connection-status{font-size:.8em}.modal{width:95%;margin:10px}.modal-header,.modal-body{padding:15px}}@media (hover: none) and (pointer: coarse){.board-cell:hover{background:linear-gradient(135deg,var(--board-color) 0%,color-mix(in srgb,var(--board-color) 95%,black) 100%);box-shadow:none}.control-btn{min-height:44px}.board-cell{-webkit-tap-highlight-color:rgba(52,152,219,.2)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@-webkit-keyframes shake{0%,to{-webkit-transform:translateX(0);transform:translate(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-5px);transform:translate(-5px)}20%,40%,60%,80%{-webkit-transform:translateX(5px);transform:translate(5px)}}.board-cell.invalid-move{-webkit-animation:shake .4s ease-in-out;animation:shake .4s ease-in-out;animation-iteration-count:2;background-color:#fcc!important;border-color:#f66!important;position:relative}.status-text.error-message{color:#e74c3c;font-weight:600;animation:pulse .5s}@keyframes pulse{0%{opacity:1}50%{opacity:.6}to{opacity:1}}