*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{color:#e4e4e7;background:#0f0f13;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#root{text-align:left;border:none;flex-direction:column;width:100%;height:100%;margin:0;display:flex;overflow:hidden}.app{flex-direction:column;flex:1;width:100%;max-width:1400px;min-height:0;margin:0 auto;padding:8px 20px;display:flex}.app-header{text-align:center;flex-shrink:0;margin-bottom:8px}.app-header h1{color:#f4f4f5;letter-spacing:-.5px;margin:0 0 2px;font-size:24px;font-weight:700}.subtitle{color:#a1a1aa;font-size:13px}.main-layout{flex:1;grid-template-columns:300px 1fr 280px;align-items:stretch;gap:16px;min-height:0;display:grid}@media (width<=1024px){.main-layout{grid-template-columns:1fr;gap:12px}}.sidebar{flex-direction:column;gap:8px;min-height:0;display:flex;overflow-y:auto}.config-panel{background:#18181b;border:1px solid #27272a;border-radius:8px;padding:10px}.config-panel.white{border-left:3px solid #f0f0f0}.config-panel.black{border-left:3px solid #555}.panel-title{color:#f4f4f5;margin-bottom:12px;font-size:15px;font-weight:600}.field{flex-direction:column;gap:4px;margin-bottom:10px;display:flex}.field span{color:#a1a1aa;text-transform:uppercase;letter-spacing:.5px;font-size:12px}.field select,.field input{color:#f4f4f5;background:#27272a;border:1px solid #3f3f46;border-radius:6px;outline:none;width:100%;padding:8px 10px;font-size:13px;transition:border-color .2s}.field select:focus,.field input:focus{border-color:#6366f1}.field select:disabled,.field input:disabled{opacity:.5}.api-key-row{gap:4px;display:flex}.api-key-row input{flex:1}.toggle-key-btn{cursor:pointer;background:#27272a;border:1px solid #3f3f46;border-radius:6px;padding:4px 8px;font-size:14px;line-height:1}.match-controls{flex-wrap:wrap;gap:8px;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;flex:1;padding:10px 20px;font-size:14px;font-weight:600;transition:background .2s,opacity .2s}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-start{color:#052e16;background:#22c55e}.btn-start:hover:not(:disabled){background:#16a34a}.btn-pause{color:#451a03;background:#f59e0b}.btn-pause:hover{background:#d97706}.btn-resume{color:#052e16;background:#22c55e}.btn-resume:hover{background:#16a34a}.btn-stop,.btn-reset{color:#450a0a;background:#ef4444}.btn-stop:hover,.btn-reset:hover{background:#dc2626}.error-box{color:#fecaca;background:#7f1d1d;border:1px solid #fca5a5;border-radius:8px;padding:10px 14px;font-size:13px}.winner-box{color:#bbf7d0;text-align:center;background:#14532d;border:1px solid #86efac;border-radius:8px;padding:12px 14px;font-size:16px;font-weight:700}.center{justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;overflow:hidden}.board-container{aspect-ratio:1;border-radius:12px;max-width:100%;height:100%;max-height:100%;overflow:hidden;box-shadow:0 4px 24px #0006}.side-panel{flex-direction:column;gap:8px;min-height:0;display:flex;overflow-y:auto}.token-counter{background:#18181b;border:1px solid #27272a;border-radius:8px;flex-shrink:0;padding:10px}.token-counter h3{color:#f4f4f5;margin-bottom:6px;font-size:13px;font-weight:600}.token-grid{flex-direction:column;gap:4px;display:flex}.token-side{background:#1f1f23;border-radius:4px;flex-direction:column;gap:1px;padding:4px 6px;font-size:11px;display:flex}.token-side.white{border-left:2px solid #f0f0f0}.token-side.black{border-left:2px solid #555}.token-side strong{color:#f4f4f5;font-size:13px}.cost{color:#a1a1aa;font-size:11px}.wrong-count{color:#f87171;font-size:11px;font-weight:600}.token-total{color:#a1a1aa;border-top:1px solid #27272a;margin-top:10px;padding-top:8px;font-size:13px}.token-total strong{color:#f4f4f5}.match-log{background:#18181b;border:1px solid #27272a;border-radius:8px;flex-direction:column;flex:1;min-height:0;padding:10px;display:flex}.match-log h3{color:#f4f4f5;margin-bottom:8px;font-size:14px;font-weight:600}.log-entries{flex-direction:column;flex:1;gap:2px;font-size:12px;display:flex;overflow-y:auto}.log-empty{color:#52525b;padding:8px 0;font-style:italic}.log-entry{border-radius:4px;grid-template-columns:28px 1fr auto auto;align-items:center;gap:6px;padding:3px 6px;display:grid}.log-entry.white{background:#ffffff0a}.log-entry.black{background:#6464640a}.move-num{color:#52525b;text-align:right;font-variant-numeric:tabular-nums}.move-text{color:#f4f4f5;font-variant-numeric:tabular-nums;font-weight:600}.move-player{color:#a1a1aa;font-size:11px}.move-tokens{color:#52525b;font-size:11px}.app-footer{text-align:center;flex-shrink:0;padding:4px 0}.app-footer a{color:#a1a1aa;font-size:12px;text-decoration:none;transition:color .2s}.app-footer a:hover{color:#fd0}