*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden;background:#0a0a0a;color:#fff}#canvas-container{width:100vw;height:100vh;display:block}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;padding:20px;z-index:10}.panel{background:#000000d9;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:20px;pointer-events:auto;backdrop-filter:blur(10px);box-shadow:0 8px 32px #00000080}#hud-top{position:absolute;top:20px;left:50%;transform:translate(-50%);text-align:center}.turn-indicator{font-weight:700;font-size:1.4em;padding:12px 30px;border-radius:25px;box-shadow:0 4px 20px #000c;border:2px solid rgba(255,255,255,.2);transition:all .3s ease}.white-turn{background:linear-gradient(135deg,#f0f0f0,#fff);color:#111;box-shadow:0 4px 20px #ffffff4d}.black-turn{background:linear-gradient(135deg,#1a1a1a,#333);color:#f0f0f0;border-color:#666;box-shadow:0 4px 20px #000c}#controls-container{position:absolute;top:20px;right:20px;width:300px;max-height:90vh;overflow-y:auto}.toggle-btn{background:linear-gradient(135deg,#2a2a2a,#1a1a1a);color:#fff;border:1px solid #555;padding:10px 20px;cursor:pointer;font-size:1em;border-radius:8px;pointer-events:auto;width:100%;transition:all .2s;font-weight:600;margin-bottom:10px}.toggle-btn:hover{background:linear-gradient(135deg,#3a3a3a,#2a2a2a);transform:translateY(-2px);box-shadow:0 4px 12px #00000080}#controls-panel h1{margin:0 0 5px;font-size:1.5em;background:linear-gradient(135deg,gold,#ffed4e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#controls-panel h2{margin:20px 0 10px;font-size:1em;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:8px;color:#aaa;text-transform:uppercase;letter-spacing:1px;font-size:.9em}.subtitle{margin-bottom:15px;font-size:.9em;color:#888;font-style:italic}label{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:.95em;color:#ccc}label span{color:gold;font-weight:700;min-width:30px;text-align:right}input[type=range]{width:100%;cursor:pointer;margin-top:5px;accent-color:#ffd700}input[type=checkbox]{width:18px;height:18px;cursor:pointer;margin-right:10px;accent-color:#ffd700}.checkbox-label{cursor:pointer;display:flex;align-items:center;padding:8px 0;transition:color .2s}.checkbox-label:hover{color:gold}button.action-btn{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;padding:12px;border-radius:8px;cursor:pointer;font-weight:700;width:100%;margin-top:15px;font-size:1em;transition:all .2s;box-shadow:0 4px 12px #4caf504d}button.action-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #4caf5066}button.action-btn:active{transform:translateY(0)}button.reset{background:linear-gradient(135deg,#d32f2f,#b71c1c);box-shadow:0 4px 12px #d32f2f4d}button.reset:hover{box-shadow:0 6px 16px #d32f2f66}button.undo{background:linear-gradient(135deg,#ff9800,#f57c00);box-shadow:0 4px 12px #ff98004d}button.undo:hover{box-shadow:0 6px 16px #ff980066}#instructions-panel{position:absolute;bottom:20px;left:20px;max-width:280px;font-size:.9em;opacity:.8;transition:opacity .3s}#instructions-panel:hover{opacity:1}#instructions-panel h2{margin:0 0 10px;font-size:1.1em;color:gold}#instructions-panel p{margin:5px 0;color:#ccc}#instructions-panel strong{color:#fff}#move-history{position:absolute;bottom:20px;right:20px;width:300px;max-height:300px}#move-history h2{margin:0 0 10px;font-size:1em;color:gold;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:5px}#moves-list{max-height:250px;overflow-y:auto;padding-right:10px}.move-item{padding:6px 10px;margin:4px 0;background:#ffffff0d;border-radius:4px;font-family:Courier New,monospace;font-size:.9em;border-left:3px solid #ffd700}.move-item:nth-child(odd){background:#ffffff14}#moves-list::-webkit-scrollbar{width:8px}#moves-list::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}#moves-list::-webkit-scrollbar-thumb{background:#ffd70080;border-radius:4px}#moves-list::-webkit-scrollbar-thumb:hover{background:#ffd700b3}#message-log{position:absolute;top:100px;left:50%;transform:translate(-50%);background:#329632f2;color:#fff;padding:12px 24px;border-radius:25px;pointer-events:none;opacity:0;transition:opacity .3s ease;font-weight:700;z-index:20;box-shadow:0 4px 20px #00000080;font-size:1.1em}.hidden{display:none!important}@media(hover:none)and (pointer:coarse){button,input[type=range],input[type=checkbox],select{min-height:44px;min-width:44px}label{padding:8px 0}}@media(max-width:768px){#controls-panel{display:none}#controls-panel:not(.hidden){display:block}#controls-container{position:fixed;bottom:10px;right:10px;top:auto;width:auto;z-index:1000}#controls-container .toggle-btn{width:60px;height:60px;border-radius:50%;font-size:1.5em;padding:0;box-shadow:0 4px 12px #000c;display:flex;align-items:center;justify-content:center}#controls-panel:not(.hidden){position:fixed;inset:10px 10px 80px;width:auto;max-height:calc(100vh - 90px);overflow-y:auto;z-index:999}#instructions-panel,#move-history{display:none}#hud-top{top:10px}.turn-indicator{font-size:1em;padding:8px 16px}#ui-layer{padding:10px}}@media(max-width:480px){.turn-indicator{font-size:.9em;padding:6px 12px}#controls-panel:not(.hidden){inset:5px 5px 75px}#controls-container .toggle-btn{width:50px;height:50px;font-size:1.3em}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.processing{animation:pulse 1.5s ease-in-out infinite}