/* =============================================================================
 * assets/lib/onyx-desktop-play.css — DESKTOP PLAY SURFACE (2026-09-15)
 * Visual only. Load LAST. Mobile (<900px) unchanged.
 * ========================================================================== */

@media (min-width: 900px) {
  .app,
  .app-shell,
  .shell,
  .oh-stage,
  .stage,
  .machine-panel,
  .canvas-wrap,
  .game-wrap,
  .game-shell,
  .play-stage,
  .layout,
  .workspace,
  .sp-boardwrap,
  .boardwrap,
  .board-wrap,
  .phone-frame,
  .mobile-frame,
  main.app,
  main.shell,
  #app,
  #game,
  #gameWrap,
  #canvasWrap,
  #machinePanel,
  .onyx-desk-unlock {
    max-width: none !important;
    width: 100% !important;
  }

  .oh-stage,
  .stage,
  .machine-panel,
  .canvas-wrap,
  .sp-boardwrap,
  .boardwrap,
  .board-wrap {
    margin-left: auto;
    margin-right: auto;
  }

  canvas#gameCanvas,
  canvas.game-canvas,
  #gameCanvas,
  .canvas-wrap canvas,
  .machine-panel canvas,
  .stage canvas,
  .sp-boardwrap canvas,
  .boardwrap canvas {
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
  }

  .touch-controls,
  .touch-pad,
  .mobile-controls,
  .dpad,
  .pad[aria-label="direction"],
  .controls .pad,
  button.touch-only {
    display: none !important;
  }

  .onyx-hud-frame {
    max-width: none !important;
    width: 100% !important;
    object-fit: contain;
  }

  .layout,
  .workspace,
  main.layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 12px;
    align-items: start;
    max-width: 1400px !important;
    margin: 0 auto;
    padding: 12px 16px;
    box-sizing: border-box;
  }

  .side-panel,
  aside.side,
  .side {
    width: auto !important;
    max-width: none !important;
  }

  body {
    max-width: none !important;
  }
  body > .app-shell,
  body > .app,
  body > main {
    max-width: none !important;
  }

  /* Portrait aspect cages: keep ratio but let width breathe */
  .sp-boardwrap,
  .boardwrap,
  .board-wrap,
  .phone-frame {
    aspect-ratio: auto !important;
    min-height: min(86vh, 960px);
  }
}

@media (min-width: 1400px) {
  .layout,
  .workspace,
  main.layout,
  .app-shell,
  .oh-stage {
    max-width: 1600px !important;
  }
}