:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}body{margin:0}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:Noto Sans TC,PingFang TC,Microsoft JhengHei,system-ui,sans-serif;background:#0d0a08;color:#f0e6d8}.app{display:grid;grid-template-columns:200px 1fr 220px;height:100%;width:100%}.canvas-wrap{position:relative;width:100%;height:100%;overflow:hidden}.canvas-wrap canvas{display:block;width:100%!important;height:100%!important}.hud{background:linear-gradient(180deg,#1a140f,#120e0a);border:1px solid #3a2a1c;padding:16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}.hud h1{font-size:1.4rem;letter-spacing:.15em;color:#e8c27a;text-align:center}.hud h2{font-size:1rem;color:#c9a86c;border-bottom:1px solid #3a2a1c;padding-bottom:6px}.status{text-align:center;padding:10px;border-radius:8px;background:#2a1f16;font-weight:600;font-size:.95rem}.status.check{background:#4a2a1a;color:#fa6}.status.checkmate{background:#5a1a1a;color:#f88}.mode-row{display:flex;gap:6px}.mode-row button,.reset,.overlay button{flex:1;padding:8px 10px;border:1px solid #5a4030;background:#2a1f16;color:#e0d0b8;border-radius:6px;cursor:pointer;font-size:.85rem;transition:background .15s}.mode-row button:hover,.reset:hover,.overlay button:hover{background:#3a2f26}.mode-row button.active{background:#6b3a2a;border-color:#c47a4a;color:#ffe8c8}.reset{margin-top:auto}.history{flex:1;overflow-y:auto;font-size:.8rem;line-height:1.6;max-height:50vh}.history .empty{color:#666;font-style:italic}.move-line{padding:2px 0;border-bottom:1px solid #2a2018}.themes{display:flex;flex-direction:column;gap:4px;font-size:.85rem}.themes select{padding:6px;background:#2a1f16;border:1px solid #5a4030;color:#e0d0b8;border-radius:4px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:100}.overlay .card{background:#1a140f;border:2px solid #c47a4a;border-radius:12px;padding:32px 48px;text-align:center}.overlay h2{font-size:1.8rem;color:#e8c27a;margin-bottom:20px}@media (max-width: 900px){.app{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.hud.left,.hud.right{flex-direction:row;flex-wrap:wrap;align-items:center;max-height:120px}.history{display:none}}