/* A selected piece gets a small touch bar; canvas space stays available to build. */
.mobile-piece-controls { display: none; }
@media screen and (max-width: 600px) {
  .canvas-workspace #piece-controls { display: none !important; }
  .canvas-workspace[data-open-panels]:not([data-open-panels=""]) #mobile-piece-controls { display: none; }
  .canvas-workspace .mobile-piece-controls {
    position: absolute;
    z-index: 11;
    left: 50%;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    width: 288px;
    max-width: calc(100% - 20px);
    box-sizing: border-box;
    padding: 5px 6px;
    border: 1px solid #c9ddd1;
    border-radius: 15px;
    color: #315f4e;
    background: #fffef7f7;
    box-shadow: 0 5px 20px #365b4421, 0 1px 3px #365b440c;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
  }
  .canvas-workspace .mobile-piece-controls[hidden],
  .mobile-piece-controls [hidden] { display: none !important; }
  .mobile-piece-controls-row { display: flex; gap: 2px; }
  .mobile-piece-controls button {
    display: flex;
    flex: 1 0 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 3px 1px;
    border: 0;
    border-radius: 9px;
    color: #426b57;
    background: transparent;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
  }
  .mobile-piece-controls-icon { font-size: 22px; line-height: 24px; font-weight: 500; }
  .mobile-piece-controls-text { font-size: 9px; line-height: 12px; font-weight: 650; white-space: nowrap; }
  .mobile-piece-controls button:hover:not(:disabled),
  .mobile-piece-controls button:active:not(:disabled),
  .mobile-piece-controls button[aria-expanded="true"] { color: #245940; background: #e4f0e6; }
  .mobile-piece-controls button:focus-visible { outline: 3px solid #147987; outline-offset: -2px; }
  .mobile-piece-controls button:disabled { opacity: .32; cursor: default; }
  .mobile-piece-controls [data-mobile-piece-action="deselect-piece"] { color: #fffef7; background: #537d5b; }
  .mobile-piece-controls [data-mobile-piece-action="deselect-piece"]:hover:not(:disabled),
  .mobile-piece-controls [data-mobile-piece-action="deselect-piece"]:active:not(:disabled) { color: white; background: #3e6846; }
  .mobile-piece-controls-tilt { display: flex; align-items: center; gap: 5px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #e0e9dc; }
  .mobile-piece-controls-tilt button { flex: 0 0 44px; background: #edf3e9; }
  .mobile-piece-controls-angle { flex: 1; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mobile-piece-controls [data-mobile-piece-action="invert-piece"][aria-pressed="true"] { color: #245940; background: #d4e7d6; }
  .mobile-piece-controls-light { display: flex; gap: 8px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #e0e9dc; }
  .mobile-piece-controls-light label { display: flex; flex: 1; align-items: center; gap: 4px; min-width: 0; font-size: 10px; white-space: nowrap; }
  .mobile-piece-controls-light select { width: 100%; min-width: 0; min-height: 44px; padding: 4px; border: 1px solid #d3e2d0; border-radius: 8px; color: #426b57; background: #edf3e9; font: inherit; font-size: 11px; }
  .mobile-piece-controls-light select:focus-visible { outline: 3px solid #147987; outline-offset: -2px; }
}