body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.app-layout{display:flex;height:100vh;overflow:hidden;width:100vw}.sidebar{background:#f4f7fb;border-right:1px solid #0000000f;padding:18px;width:220px}.sidebar h2{color:#1f2937;font-size:16px;margin:0 0 8px}.sidebar button{background:#2b6cb0;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:14px;padding:8px 10px}.sidebar button.secondary{background:#4b5563}.canvas-wrap{flex:1 1 auto}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.layout{height:100vh;width:100%}.layout,.sidebar{display:flex;overflow:hidden}.sidebar{background:linear-gradient(180deg,#1f2937,#111827);box-sizing:border-box;color:#fff;flex-direction:column;gap:12px;min-width:260px;padding:20px;width:auto}.title{font-size:18px;font-weight:600;margin:0 0 8px}.sidebar-header{align-items:center;display:flex;justify-content:space-between;width:100%}.hamburger-button{background:#0000;border:none;color:#fff;cursor:pointer;display:none;font-size:24px;line-height:1;padding:4px 8px}.hamburger-button:hover{opacity:.8}.hamburger-icon{display:inline-block}.menu{display:flex;flex-direction:column;gap:8px}.menu-button{background:#e5e7eb;border:none;border-radius:6px;color:#111827;cursor:pointer;font-size:14px;font-weight:600;min-height:36px;padding:8px 10px}.menu-button:hover{filter:brightness(.95)}.menu-button:active{filter:brightness(.9)}.status{color:#9ca3af;font-size:13px;margin-top:12px}.main{flex:1 1;position:relative}.canvas{display:block;height:100%;width:100%}@media (max-width:768px){.layout{flex-direction:column}.sidebar{flex-shrink:0;gap:0;height:auto;overflow:visible;padding:8px 12px;position:relative;width:100%;z-index:10}.sidebar-header{align-items:center;flex-direction:row;justify-content:space-between;width:100%}.hamburger-button{display:block}.title{flex:1 1;font-size:16px;margin:0;text-align:left;width:auto}.menu{background:linear-gradient(180deg,#1f2937,#111827);box-sizing:border-box;display:flex;flex-direction:column;gap:6px;left:0;max-height:calc(100vh - 48px);max-height:calc(100vh - var(--sidebar-h, 48px));opacity:1;overflow-y:auto;padding:10px 12px;position:fixed;right:0;top:48px;top:var(--sidebar-h,48px);transform:scaleY(1);transform-origin:top center;transition:opacity .2s ease,transform .2s ease,visibility 0s linear 0s;visibility:visible;width:100%;z-index:200}.menu.menu-collapsed{opacity:0;pointer-events:none;transform:scaleY(0);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;visibility:hidden}.menu-button{flex:1 1;font-size:14px;min-height:44px;min-width:auto;padding:12px 16px;touch-action:manipulation;width:100%}.status{display:none}.main{flex:1 1;min-height:0;overflow:hidden}.move-list{max-height:100px;overflow-y:auto}.show-all-moves{background:#6b7280;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:12px;margin-top:4px;padding:6px;width:100%}.show-all-moves:active{background:#4b5563}.moves-overlay{background:#00000073;top:0;z-index:190}.moves-overlay,.moves-overlay-panel{bottom:0;left:0;position:fixed;right:0}.moves-overlay-panel{animation:slideDown .2s ease;background:linear-gradient(180deg,#1f2937,#111827);color:#fff;display:flex;flex-direction:column;padding:0 12px 12px;top:48px;top:var(--sidebar-h,48px);z-index:195}@keyframes slideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.moves-overlay-header{align-items:center;border-bottom:1px solid #ffffff26;display:flex;flex-shrink:0;justify-content:space-between;padding:10px 0 8px}.moves-overlay-close{background:#0000;border:none;color:#fff;cursor:pointer;font-size:18px;line-height:1;opacity:.8;padding:4px 8px}}.move-list{background:#0000000d;border-radius:6px;max-height:200px;overflow-y:auto;padding:8px}.move-item{border-bottom:1px solid #ffffff1a;color:#d1d5db;font-size:12px;padding:4px}.move-item:last-child{border-bottom:none}.move-list.collapsed{max-height:100px}.move-list.expanded{max-height:none}