*{box-sizing:border-box}body{margin:0;padding:0;background:#1a1a2e;color:#eee;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app{display:flex;min-height:100vh;gap:20px;padding:20px;justify-content:center}.board-section{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:12px}.board-with-eval{display:flex;gap:8px;align-items:stretch}.board-wrapper{width:min(70vh,560px);aspect-ratio:1;position:relative}.eval-bar{width:20px;border-radius:4px;overflow:hidden;position:relative;background:#333;display:flex}.eval-bar-white{background:#e8e8e8;transition:height .5s ease;width:100%}.game-over-overlay{position:absolute;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:100;border-radius:4px}.game-over-content{text-align:center;padding:24px}.game-over-content h2{font-size:28px;margin:0 0 8px;color:#4ecca3}.game-over-content p{font-size:14px;color:#aaa;margin:0 0 16px}.status-bar{background:#16213e;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:500;text-align:center;min-width:300px;position:relative;overflow:hidden;align-self:stretch}.thinking-bar{position:relative;height:100%;width:100%}.thinking-bar-fill{position:absolute;top:-12px;left:-24px;bottom:-12px;background:#4ecca326;transition:width .3s ease;pointer-events:none}.thinking-bar-text{position:relative;color:#4ecca3;z-index:1}.side-panel{flex:0 0 320px;display:flex;flex-direction:column;gap:16px;max-height:calc(min(70vh,560px) + 58px);overflow:hidden}.side-panel h1{margin:0 0 4px;font-size:24px;color:#4ecca3}.side-panel .subtitle{font-size:13px;color:#666;margin:0 0 8px}.side-panel .subtitle a{color:#4ecca3;text-decoration:none}.side-panel .subtitle a:hover{text-decoration:underline}.panel-section{background:#16213e;border-radius:8px;padding:16px}.panel-section h3{margin:0 0 12px;font-size:14px;text-transform:uppercase;color:#888;letter-spacing:.5px}.moves-panel{flex:1;display:flex;flex-direction:column;min-height:0}.moves-list{flex:1;overflow-y:auto;font-family:monospace;font-size:13px;display:flex;flex-direction:column;gap:2px}.move-pair{display:flex;gap:4px}.move-number{color:#666;min-width:28px}.move{color:#ccc;padding:1px 4px;border-radius:2px}.move.last{background:#4ecca333;color:#4ecca3}.loading-overlay{position:fixed;inset:0;background:#1a1a2e;display:flex;align-items:center;justify-content:center;z-index:1000;flex-direction:column;gap:16px}.loading-overlay h2{color:#4ecca3;font-size:24px;margin:0}.loading-overlay p{color:#888;font-size:14px;margin:0}.spinner{width:40px;height:40px;border:3px solid #333;border-top:3px solid #4ecca3;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.setting{display:flex;align-items:center;gap:12px;margin-bottom:12px}.setting:last-child{margin-bottom:0}.setting label{flex:0 0 100px;font-size:14px;color:#aaa}.setting select,.setting input[type=range]{flex:1}.setting select{padding:8px 12px;border:1px solid #333;border-radius:4px;background:#0f0f23;color:#eee;font-size:14px}.setting select:focus{outline:none;border-color:#4ecca3}.setting input[type=range]{accent-color:#4ecca3}.setting .value-display{flex:0 0 40px;text-align:right;font-family:monospace;color:#4ecca3;font-size:14px}.color-picker{display:flex;gap:8px}.color-btn{flex:1;padding:8px 12px;border:2px solid #333;border-radius:6px;background:#0f0f23;color:#aaa;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s}.color-btn:hover{border-color:#555}.color-btn.active{border-color:#4ecca3;color:#4ecca3;background:#4ecca31a}button{cursor:pointer;transition:all .2s}.btn-primary{width:100%;padding:12px 20px;background:#4ecca3;color:#1a1a2e;border:none;border-radius:6px;font-size:16px;font-weight:600;margin-bottom:8px}.btn-primary:hover{background:#3db892}.btn-primary:disabled{background:#666;cursor:not-allowed}.btn-secondary{width:100%;padding:10px 16px;background:transparent;color:#4ecca3;border:1px solid #4ecca3;border-radius:6px;font-size:14px;font-weight:500}.btn-secondary:hover{background:#4ecca31a}.mode-tabs{display:flex;gap:8px;margin-bottom:12px}.mode-tab{flex:1;padding:8px 12px;border:1px solid #333;border-radius:6px;background:transparent;color:#888;font-size:13px;font-weight:500;cursor:pointer}.mode-tab:hover{border-color:#555;color:#aaa}.mode-tab.active{border-color:#4ecca3;color:#4ecca3;background:#4ecca31a}.error{background:#f44;color:#fff;padding:12px 16px;border-radius:8px;font-size:14px}@media (max-width: 900px){.app{flex-direction:column;align-items:center}.board-wrapper{width:min(90vw,500px)}.side-panel{flex:0 0 auto;max-width:100%;width:100%}.moves-panel{max-height:200px}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#333;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#444}