/* Only menu placement changes. Keep the original desktop board and renderer. */
body.duelDesktop .desktopMenuPanel[hidden] { display: none !important; }
body.duelDesktop.desktopCompactUI .desktopMenuToggle {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  max-width: 44px; max-height: 44px; box-sizing: border-box;
  padding: 0; border: 0; border-radius: 50%; overflow: hidden;
  background: transparent url('./menu-orb.svg') center / 100% 100% no-repeat;
  color: #e5d7ad; box-shadow: 0 2px 5px #0009;
  display: inline-flex; align-items: center; justify-content: center;
}
body.duelDesktop .desktopMenuArrow {
  width: 25px; height: 25px; pointer-events: none;
  fill: currentColor; stroke: #18231c; stroke-width: 1;
  filter: drop-shadow(0 1px 0 #050e10) drop-shadow(0 -1px 0 #f3e9c126);
}
body.duelDesktop .desktopMenuToggle[aria-expanded="true"] .desktopMenuArrow { transform: rotate(180deg); }
body.duelDesktop .desktopMenuToggle:active { filter: brightness(.82); }
body.duelDesktop .desktopMenuToggle:focus-visible { outline: 2px solid #f4eec6; outline-offset: 2px; }
body.duelDesktop.desktopCompactUI .top-bar {
  left: auto; right: 12px; top: 10px; width: 44px; height: 44px;
  min-height: 44px; padding: 0; background: transparent;
}
body.duelDesktop.desktopCompactUI .top-bar .brand { display: none; }
body.duelDesktop #desktopTopMenu {
  position: absolute; right: 50px; top: 0; flex: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(360px, calc(100vw - 80px)); max-height: calc(100dvh - 20px);
  box-sizing: border-box; min-width: 0; gap: 6px; padding: 8px;
  overflow: auto; overscroll-behavior: contain;
  background: #102332f5; border: 1px solid #96c7c280; border-radius: 5px;
}
body.duelDesktop #desktopTopMenu .historyControls { display: contents; }
body.duelDesktop #desktopTopMenu button, body.duelDesktop #desktopBottomMenu button {
  min-height: 40px; width: 100%; margin: 0; font-size: 12px;
  padding: 7px 10px; white-space: normal; line-height: 1.35;
}
body.duelDesktop.desktopCompactUI .boardDock {
  display: block; right: 12px; bottom: 10px; width: 44px; height: 44px;
}
body.duelDesktop #desktopBottomMenu {
  position: absolute; right: 50px; bottom: 0;
  display: grid; grid-template-columns: 1fr; width: min(180px, calc(100vw - 80px));
  gap: 6px; padding: 8px; max-height: calc(100dvh - 20px); overflow-y: auto;
  background: #102332f5; border: 1px solid #96c7c280; border-radius: 5px;
}
body.duelDesktop #phaseBanner { display: none !important; }
