/* One design canvas and one width-derived zoom, shared by WebView and browsers. */
html[data-viewport-mode="wide"] { scrollbar-gutter: stable; }
html[data-viewport-mode="wide"] body {
  zoom: var(--ui-scale, 1);
  width: 1440px;
  min-width: 0;
  font-size: 18px;
}
html[data-viewport-mode="wide"] .app-shell {
  width: 1440px;
  min-width: 0;
  min-height: var(--ui-viewport-height, 100vh);
  margin: 0;
  border: 0;
  border-radius: 0;
}
html[data-viewport-mode="wide"] .app-main { padding: 20px 24px 28px; }
html[data-viewport-mode="wide"] .panel { padding: 14px; }

.detail-drawer {
  width: calc(var(--ui-viewport-width, 100vw) / 2);
  max-width: calc(var(--ui-viewport-width, 100vw) / 2);
  height: var(--ui-viewport-height, 100dvh);
  max-height: var(--ui-viewport-height, 100dvh);
}
.quick-score-drawer {
  height: var(--ui-viewport-height, 100dvh);
  width: min(520px, var(--ui-viewport-width, 100vw));
}
html.native-app .quick-score-drawer { width: min(440px, var(--ui-viewport-width, 100vw)); }
.confirm-dialog { width: min(420px, calc(var(--ui-viewport-width, 100vw) - 40px)); }
.focus-state-overlay, .settlement-fireworks {
  width: var(--ui-viewport-width, 100vw);
  height: var(--ui-viewport-height, 100dvh);
}
.focus-state-overlay-card { width: min(520px, calc(var(--ui-viewport-width, 100vw) * .92)); }
html[data-viewport-mode="wide"] .detail-drawer-head { padding: 26px 28px 20px; gap: 16px; }
html[data-viewport-mode="wide"] .detail-drawer-head h2 { font-size: 28.8px; }
html[data-viewport-mode="wide"] .detail-drawer-content { padding: 24px 28px 40px; }
html[data-viewport-mode="wide"] .detail-metric { padding: 16px; }
html[data-viewport-mode="wide"] .detail-record { flex-wrap: nowrap; gap: 12px; }