/* v16: readable, viewport-sized native windows. Keep native focus/cancel, existing
   visualViewport variables and the one body scroller; no requests or observers. */
body #detail-dialog {
  --ui16-window-top: max(4px,env(safe-area-inset-top,0px));
  --ui16-window-bottom: max(4px,env(safe-area-inset-bottom,0px));
  --ui16-window-left: max(4px,env(safe-area-inset-left,0px));
  --ui16-window-right: max(4px,env(safe-area-inset-right,0px));
  --ui16-window-height: calc(var(--visible-height,100svh) - var(--ui16-window-top) - var(--ui16-window-bottom));
  position:fixed;
  inset:auto;
  top:calc(var(--visible-top,0px) + var(--ui16-window-top));
  left:calc(var(--visible-left,0px) + var(--ui16-window-left));
  right:auto;
  bottom:auto;
  transform:none;
  box-sizing:border-box;
  width:calc(var(--visible-width,100vw) - var(--ui16-window-left) - var(--ui16-window-right));
  max-width:none;
  height:var(--ui16-window-height);
  max-height:var(--ui16-window-height);
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  font-size:max(16px,var(--oa-fs-body,16px));
  line-height:1.5;
}
body #detail-dialog[open] { display:flex; flex-direction:column; }
body #detail-dialog[data-ui15-navigation] { height:var(--ui16-window-height); max-height:var(--ui16-window-height); }
body #detail-dialog > :is(.dialog-header,.dialog-content-navigation,.dialog-fixed-actions,.dialog-footer,.status-message) { flex:none; min-width:0; }
body #detail-dialog .dialog-header {
  min-height:72px;
  padding:10px 16px;
  gap:12px;
  align-items:center;
}
body #detail-dialog .dialog-header > div { min-width:0; flex:1; }
body #detail-dialog .dialog-header h2 {
  font-size:max(23px,var(--oa-fs-title,24px));
  line-height:1.3;
  overflow-wrap:anywhere;
}
body #detail-dialog .dialog-close { flex:none; width:52px; height:52px; min-width:52px; min-height:52px; }
body #detail-dialog .dialog-body {
  flex:1 1 0;
  min-height:0;
  min-width:0;
  padding:16px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  scroll-padding-block:12px;
}
body #detail-dialog[data-ui15-navigation] .dialog-body { flex:1 1 0; padding:16px; }
body #detail-dialog .dialog-body > * { max-width:100%; min-width:0; }
body #detail-dialog .dialog-fixed-actions {
  padding:10px 16px;
  border-top:1px solid #9d8352;
}
body #detail-dialog .dialog-fixed-actions .dialog-action-row,
body #detail-dialog .dialog-fixed-actions > .codex-fixed-actions {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(138px,100%),1fr));
  gap:10px;
  margin:0;
}
body #detail-dialog .dialog-fixed-actions [data-thumb-action-count="1"] { grid-template-columns:minmax(0,1fr); }
body #detail-dialog .dialog-fixed-actions .codex-fixed-actions > .dialog-action-row { display:contents; }
body #detail-dialog .dialog-fixed-actions .spaced-note { grid-column:1/-1; margin:0; }
body #detail-dialog .dialog-fixed-actions button {
  width:100%;
  min-width:0;
  min-height:52px;
  padding:10px 12px;
  font-size:max(15px,var(--oa-fs-body,16px));
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
}
body #detail-dialog :is(.dialog-lead,.dialog-muted,.spaced-note,.news-paragraph,.hub-panel,.setting-row > p,.motion-setting p,.guide-steps p,.dialog-notice,.friend-empty,.room-caption,.party-meta,.party-level,.party-state,.growth-confirm small,.equipment-row p,.equipment-row label,.character-facts,.detail-list > div) {
  font-size:max(14px,var(--oa-fs-caption,14px));
  line-height:1.55;
}
body #detail-dialog :is(.dialog-section-title,.setting-row h3,.hub-panel h3,.hub-panel h4,.equipment-row h3,.room-directory-card h3) {
  font-size:max(17px,var(--oa-fs-emph,18px));
  line-height:1.4;
}
body #detail-dialog :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) {
  min-height:52px;
  font-size:max(16px,var(--oa-fs-body,16px));
}
body #detail-dialog :is(.character-view-tabs,.language-options,.hub-tabs,.segmented-control) button {
  min-height:52px;
  font-size:max(14px,var(--oa-fs-caption,14px));
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
}
body #detail-dialog .detail-list > div { grid-template-columns:minmax(88px,30%) minmax(0,1fr); gap:12px; padding:12px 0; }
body #detail-dialog .detail-list :is(dt,dd) { min-width:0; margin:0; overflow-wrap:anywhere; }
body #detail-dialog .menu-grid,
body #detail-dialog[data-ui15-navigation] :is(.hub-list,.menu-grid) { gap:12px; }
body #detail-dialog[data-ui15-navigation] button.ui15-action-row { min-height:64px; padding:12px 16px; font-size:max(16px,var(--oa-fs-body,16px)); }
body #detail-dialog .character-choice { gap:16px; min-height:88px; padding:12px; }
body #detail-dialog .character-choice img { width:46px; height:68px; }
body #detail-dialog .character-choice strong { font-size:max(16px,var(--oa-fs-body,16px)); }
body #detail-dialog .character-choice small { font-size:max(14px,var(--oa-fs-caption,14px)); line-height:1.45; }
body #detail-dialog .character-view-panel .mini-character { gap:16px; padding:14px; }
body #detail-dialog .character-view-panel .mini-character img { width:80px; height:132px; }
body #detail-dialog .character-view-panel .mini-character h3 { font-size:max(20px,var(--oa-fs-emph,20px)); }
body #detail-dialog .shop-product { min-height:96px; grid-template-columns:56px minmax(0,1fr) auto; padding:12px; gap:12px; }
body #detail-dialog .shop-product > img { width:56px; height:64px; }
body #detail-dialog .shop-product :is(small,em) { font-size:max(14px,var(--oa-fs-caption,14px)); }
body #detail-dialog .shop-product strong { font-size:max(16px,var(--oa-fs-body,16px)); }
body #detail-dialog .shop-product b { overflow-wrap:anywhere; }

/* Codex is a reading surface: keep artwork and names large rather than packing
   two tiny cards into a 320px hand-positioned window. Tabs retain native focus. */
body #detail-dialog #dialog-content-navigation:not([hidden]) {
  padding:10px 16px;
  max-height:180px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
body #detail-dialog .codex-toolbar,
body #detail-dialog .dialog-content-navigation[data-compact-row="true"] .codex-toolbar {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
}
body #detail-dialog .codex-toolbar > .segmented-control {
  display:flex;
  gap:8px;
  padding:0;
  border:0;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
body #detail-dialog .codex-toolbar > .segmented-control button,
body #detail-dialog .dialog-content-navigation[data-compact-row="true"] .codex-toolbar .segmented-control button {
  flex:1 0 auto;
  min-width:72px;
  min-height:48px;
  padding:8px 12px;
  font-size:max(14px,var(--oa-fs-caption,14px));
  line-height:1.4;
  white-space:nowrap;
}
body #detail-dialog .codex-collection-status,
body #detail-dialog .dialog-content-navigation[data-compact-row="true"] .codex-collection-status {
  display:flex;
  gap:12px;
  max-width:none;
  padding:0 4px;
  font-size:max(14px,var(--oa-fs-caption,14px));
  line-height:1.4;
}
body #detail-dialog .codex-progress-track { display:block; max-width:220px; }
body #detail-dialog .codex-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
body #detail-dialog .codex-card {
  grid-template-columns:72px minmax(0,1fr);
  min-height:112px;
  gap:16px;
  padding:14px;
}
body #detail-dialog .codex-card :is(strong,small,em) { line-height:1.45; white-space:normal; overflow-wrap:anywhere; }
body #detail-dialog .codex-card strong { font-size:max(17px,var(--oa-fs-body,16px)); }
body #detail-dialog .codex-card :is(small,em) { font-size:max(14px,var(--oa-fs-caption,14px)); }
body #detail-dialog .codex-card-portrait { width:72px; height:80px; object-fit:contain; }
body #detail-dialog .codex-card picture { display:flex; justify-content:center; width:72px; }
body #detail-dialog .codex-card .codex-monster-art { transform:none; width:64px; height:64px; }
body #detail-dialog .codex-card :is(.item-icon,.codex-card-map) { width:64px; height:72px; }
body #detail-dialog .codex-detail { font-size:max(16px,var(--oa-fs-body,16px)); line-height:1.6; }
body #detail-dialog .codex-detail-heading { gap:20px; padding-bottom:16px; align-items:center; }
body #detail-dialog .codex-detail-heading > :is(img,picture),
body #detail-dialog .codex-detail-heading > picture > img { width:100px; height:116px; object-fit:contain; }
body #detail-dialog .codex-detail-heading > div { min-width:0; }
body #detail-dialog .codex-detail-heading h3 { font-size:max(23px,var(--oa-fs-title,24px)); line-height:1.4; }
body #detail-dialog .codex-detail-heading p { font-size:max(14px,var(--oa-fs-caption,14px)); line-height:1.5; }
body #detail-dialog .codex-detail > :is(.dialog-lead,.dialog-muted) { font-size:max(16px,var(--oa-fs-body,16px)); line-height:1.65; margin:12px 0; }
body #detail-dialog .codex-detail > .codex-map-art { height:clamp(150px,26svh,280px); }
body #detail-dialog .hub-panel { max-width:850px; margin-inline:auto; }
body #detail-dialog .news-detail { max-width:850px; margin-inline:auto; }
body #detail-dialog :is(.news-paragraph,.hub-chat-text) { font-size:max(16px,var(--oa-fs-body,16px)); line-height:1.7; }
body #detail-dialog .dialog-body > :is(.account-form,.battle-settings,.setting-row) { max-width:850px; }

@media(min-width:700px) {
  body #detail-dialog .codex-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body #detail-dialog .menu-grid,
  body #detail-dialog[data-ui15-navigation] :is(.hub-list,.menu-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:1001px) {
  body #detail-dialog {
    --ui16-window-height:min(900px,calc(var(--visible-height,100svh) * .9));
    top:calc(var(--visible-top,0px) + (var(--visible-height,100svh) - var(--ui16-window-height)) / 2);
    left:calc(var(--visible-left,0px) + var(--visible-width,100vw) / 2);
    width:min(1080px,calc(var(--visible-width,100vw) - 48px));
    transform:translateX(-50%);
  }
  body #detail-dialog .dialog-body { padding:24px; }
  body #detail-dialog .dialog-header { padding:12px 24px; }
  body #detail-dialog .dialog-fixed-actions { padding:12px 24px; }
  body #detail-dialog .codex-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:359px) {
  body #detail-dialog .dialog-header { gap:8px; padding:8px 12px; }
  body #detail-dialog .dialog-body { padding:12px; }
  body #detail-dialog .dialog-fixed-actions { padding:8px 12px; gap:8px; }
  body #detail-dialog .dialog-fixed-actions .dialog-action-row { gap:8px; grid-template-columns:repeat(auto-fit,minmax(min(124px,100%),1fr)); }
  body #detail-dialog .dialog-fixed-actions [data-thumb-action-count="1"] { grid-template-columns:minmax(0,1fr); }
  body #detail-dialog #dialog-content-navigation:not([hidden]) { padding:8px 12px; }
  body #detail-dialog .codex-card { grid-template-columns:64px minmax(0,1fr); gap:12px; padding:12px; }
  body #detail-dialog .codex-card :is(picture,.codex-card-portrait) { width:64px; }
  body #detail-dialog .codex-detail-heading { gap:12px; }
  body #detail-dialog .codex-detail-heading > :is(img,picture),
  body #detail-dialog .codex-detail-heading > picture > img { width:80px; height:100px; }
  body #detail-dialog .shop-product { grid-template-columns:48px minmax(0,1fr); gap:12px; }
  body #detail-dialog .shop-product b { grid-column:2; max-width:none; }
}
/* Small keyboard/landscape windows still devote most space to the body. The
   codex controls form one native horizontally scrollable strip, not a tall
   sticky block; Tab scrolls each focused tab/filter into view. */
@media(max-height:480px) {
  body #detail-dialog .dialog-header { min-height:56px; padding:4px 12px; }
  body #detail-dialog .dialog-header h2 { font-size:max(20px,var(--oa-fs-emph,20px)); }
  body #detail-dialog .dialog-close { width:48px; height:48px; min-width:48px; min-height:48px; }
  body #detail-dialog .dialog-body { padding:12px; }
  body #detail-dialog .dialog-fixed-actions { padding:6px 12px; }
  body #detail-dialog .dialog-fixed-actions button { min-height:48px; padding:8px 12px; }
  body #detail-dialog #dialog-content-navigation:not([hidden]) { max-height:64px; padding:6px 12px; overflow-x:auto; overflow-y:hidden; scrollbar-gutter:auto; }
  body #detail-dialog .codex-toolbar,
  body #detail-dialog .dialog-content-navigation[data-compact-row="true"] .codex-toolbar { display:flex; flex-wrap:nowrap; align-items:center; gap:12px; min-width:max-content; }
  body #detail-dialog .codex-toolbar > .segmented-control { flex:none; overflow:visible; }
  body #detail-dialog .codex-collection-status { flex:none; white-space:nowrap; }
  body #detail-dialog .codex-progress-track { display:none; }
  body #detail-dialog .codex-card { min-height:100px; }
}
html[data-visual-viewport-compact="true"] body #detail-dialog .dialog-header { min-height:52px; padding:2px 10px; }
html[data-visual-viewport-compact="true"] body #detail-dialog .dialog-body { padding:10px; }
html[data-visual-viewport-compact="true"] body #detail-dialog .dialog-fixed-actions { padding:4px 10px; }
html[data-visual-viewport-compact="true"] body #detail-dialog #dialog-content-navigation:not([hidden]) { max-height:64px; padding:6px 10px; overflow-x:auto; overflow-y:hidden; scrollbar-gutter:auto; }
html[data-visual-viewport-compact="true"] body #detail-dialog .codex-toolbar,
html[data-visual-viewport-compact="true"] body #detail-dialog .dialog-content-navigation[data-compact-row="true"] .codex-toolbar { display:flex; flex-wrap:nowrap; align-items:center; gap:12px; min-width:max-content; }
html[data-visual-viewport-compact="true"] body #detail-dialog .codex-toolbar > .segmented-control { flex:none; overflow:visible; }
html[data-visual-viewport-compact="true"] body #detail-dialog .codex-collection-status { flex:none; white-space:nowrap; }
html[data-visual-viewport-compact="true"] body #detail-dialog .codex-progress-track { display:none; }

/* The existing battle/training window lives inside the logical game viewport.
   Use its dimensions and rotated safe-area variables rather than positioning a
   narrow hand-sized box above the skill controls. Existing view.mjs owns input,
   Escape, focus return, inert state and each page's native scroll. */
body.game-interface #battle-view-panel.settings-panel {
  --ui16-panel-top:max(4px,var(--game-safe-top,0px));
  --ui16-panel-bottom:max(4px,var(--game-safe-bottom,0px));
  --ui16-panel-height:calc(var(--view-height,100svh) - var(--ui16-panel-top) - var(--ui16-panel-bottom));
  position:fixed;
  inset:auto;
  top:var(--ui16-panel-top);
  left:calc(var(--view-width,100vw) / 2);
  right:auto;
  bottom:auto;
  width:min(1080px,calc(var(--view-width,100vw) - max(4px,var(--game-safe-left,0px)) - max(4px,var(--game-safe-right,0px))));
  max-width:none;
  height:var(--ui16-panel-height);
  max-height:var(--ui16-panel-height);
  min-width:0;
  min-height:0;
  margin:0;
  padding:12px;
  transform:translateX(-50%);
  box-sizing:border-box;
  overflow:hidden;
  gap:12px;
}
body.game-interface #battle-view-panel.settings-panel.is-open { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
body.game-interface #battle-view-panel .settings-heading { min-width:0; min-height:52px; gap:12px; }
body.game-interface #battle-view-panel .settings-heading h2 { min-width:0; font-size:23px; line-height:1.35; white-space:normal; overflow-wrap:anywhere; }
body.game-interface #battle-view-panel .view-close { flex:none; min-width:52px; min-height:52px; height:auto; font-size:15px; padding:8px 12px; }
body.game-interface #battle-view-panel .view-page.is-current { min-width:0; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; scroll-padding-block:10px; padding:2px; }
body.game-interface #battle-view-panel .view-page > * { min-width:0; max-width:100%; }
body.game-interface #battle-view-panel .view-thumb-footer { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr)); min-height:52px; gap:12px; }
body.game-interface #battle-view-panel .view-thumb-footer > * { min-width:0; width:100%; min-height:52px; height:auto; padding:10px 12px; font-size:16px; line-height:1.35; white-space:normal; overflow-wrap:anywhere; }
body.game-interface #battle-view-panel .view-page button { min-height:48px; font-size:14px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
body.game-interface #battle-view-panel :is(.field > span,.field small,.check-field,.check-field small,.speed-field > span,.formation-note,.start-reason,.pending-note,.party-member-copy small,.party-member-status,.party-heading > span) { font-size:14px; line-height:1.5; }
body.game-interface #battle-view-panel .field select { height:auto; min-height:52px; font-size:16px; line-height:1.4; }
body.game-interface #battle-view-panel :is(.conditions-summary h3,.time-principle h3,.party-heading h3) { font-size:18px; line-height:1.4; }
body.game-interface #battle-view-panel :is(.conditions-summary p,.time-principle p,.training-basic-intro,.party-member-name) { font-size:16px; line-height:1.6; }
body.game-interface[data-desktop="true"] #battle-view-panel.settings-panel {
  --ui16-panel-height:min(900px,calc(var(--view-height,100svh) * .9));
  top:calc((var(--view-height,100svh) - var(--ui16-panel-height)) / 2);
  width:min(1080px,calc(var(--view-width,100vw) - 48px));
  padding:20px;
}
body.game-interface[data-ultra-short-landscape="true"] #battle-view-panel.settings-panel { padding:8px; gap:8px; }
body.game-interface[data-ultra-short-landscape="true"] #battle-view-panel .settings-heading { min-height:48px; }
body.game-interface[data-ultra-short-landscape="true"] #battle-view-panel .settings-heading h2 { font-size:20px; }
body.game-interface[data-ultra-short-landscape="true"] #battle-view-panel .view-close { min-height:48px; min-width:48px; }
body.game-interface[data-ultra-short-landscape="true"] #battle-view-panel .view-thumb-footer { min-height:48px; gap:8px; }
body.game-interface[data-ultra-short-landscape="true"] #battle-view-panel .view-thumb-footer > * { min-height:48px; padding:8px 12px; }