/* A test panel is a viewport overlay, never a shrinking child of the game HUD. */
#app.test-panel-open, #app.legacy-test-panel-open { touch-action: pan-y pinch-zoom; }
#new-map-ui .new-map-header { z-index: 120; }
#new-map-test-menu { z-index: 121; }
#new-map-test-menu > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; touch-action: manipulation; }
#new-map-test-menu:not([open]) > .new-map-test-body { display: none !important; }
#new-map-test-menu[open] > .new-map-test-body {
  position: fixed; box-sizing: border-box;
  top: var(--test-panel-top, 62px); right: max(10px, env(safe-area-inset-right));
  width: min(420px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height: calc(100vh - 72px - env(safe-area-inset-bottom));
  max-height: calc(var(--test-panel-height, calc(100dvh - 72px)) - env(safe-area-inset-bottom));
  margin: 0; padding: 12px !important; gap: 10px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom;
  background: #102535fa; box-shadow: 0 12px 40px #0009; z-index: 122;
}
.new-map-test-body > * { flex: 0 0 auto; min-width: 0; }
.new-map-test-body .test-group { flex-shrink: 0; overflow: visible; }
.new-map-test-body .test-group > summary { min-height: 44px; box-sizing: border-box; }
.new-map-test-body button, .new-map-test-body select { min-height: 44px; touch-action: manipulation; }
.new-map-test-body .test-panel-toolbar { display: flex; gap: 8px; position: sticky; top: -12px; z-index: 2; padding: 8px 0; background: #102535; }
.test-panel-toolbar button { flex: 1; }
.legacy-test-menu { position: relative; z-index: 121; pointer-events: auto; }
.legacy-test-menu > summary { min-height: 44px; padding: 8px 12px; display: flex; align-items: center; box-sizing: border-box; border: 1px solid #647e92; border-radius: 10px; background: #102535ed; font-size: 14px; cursor: pointer; touch-action: manipulation; }
.legacy-test-menu:not([open]) > .legacy-test-body { display: none !important; }
.legacy-test-body { position: fixed; z-index: 122; top: var(--test-panel-top, 62px); right: max(10px, env(safe-area-inset-right)); box-sizing: border-box; width: min(420px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: calc(var(--test-panel-height, calc(100dvh - 72px)) - env(safe-area-inset-bottom)); padding: 12px; overflow: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; -webkit-overflow-scrolling: touch; background: #102535fa; border: 1px solid #647e92; border-radius: 12px; box-shadow: 0 12px 40px #0009; }
.legacy-test-body .test-group { margin: 10px 0; }
.legacy-test-body .test-group > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; }
.legacy-test-body .test-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.legacy-test-body button, .legacy-test-body select { min-height: 44px; font-size: 14px; touch-action: manipulation; }
.legacy-test-body .test-panel-toolbar { display: flex; gap: 8px; position: sticky; top: -12px; z-index: 2; padding: 8px 0; background: #102535; }
.legacy-test-body .test-item-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.legacy-test-body .test-group-grid p { grid-column: 1 / -1; }
.new-map-mode #legacy-test-menu { display: none !important; }
@media (max-width: 480px) {
  .new-map-test-body .test-group-grid { grid-template-columns: minmax(0, 1fr); }
  .new-map-header nav { gap: 5px; right: max(8px, env(safe-area-inset-right)); }
  #new-map-token-count { font-size: 12px; }
  .legacy-test-body .test-group-grid { grid-template-columns: minmax(0, 1fr); }
  .legacy-test-body .test-item-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}