/* Shared compact layout: fixed navigation/actions, one content scroll region. */
:root { --ui-scale: 1; }
.modal-wrap {
  inset: auto; top: var(--ui-vy, 0px); left: var(--ui-vx, 0px);
  width: var(--ui-vw, 100vw); height: var(--ui-vh, 100dvh);
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
.modal {
  max-height: min(calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), calc(var(--ui-vh, 100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
}
.modal.ui-compact-dialog, body.portrait .modal.ui-compact-dialog {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.ui-dialog-head, .ui-dialog-foot { flex: 0 0 auto; min-width: 0; padding: 10px 14px; }
.ui-dialog-head { border-bottom: 1px solid var(--line); }
.ui-dialog-head h2 { margin: 0; font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
.modal.has-x .ui-dialog-head { padding-right: 60px; min-height: 62px; }
.modal.has-x > .x-btn { top: 8px; right: 8px; width: 44px; height: 44px; z-index: 3; }
.ui-dialog-body { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px 12px; overflow-wrap: anywhere; }
.ui-dialog-body > p:first-child { margin-top: 0; }
.ui-dialog-body > :last-child { margin-bottom: 0; }
.ui-dialog-foot { border-top: 1px solid var(--line); background: var(--paper); box-shadow: 0 -6px 12px #2a1c1c08; }
.ui-dialog-foot > .btn { width: 100%; }
.ui-dialog-foot .btn, .ui-dialog-foot .btn.big { min-height: 44px; margin: 0; padding: 8px 10px; font-size: 14px; white-space: normal; }
.ui-dialog-foot .btn-row, .ui-dialog-foot .pc-model-actions { display: flex; gap: 8px; margin: 0; }
.ui-dialog-foot .btn-row > .btn, .ui-dialog-foot .pc-model-actions > .btn { flex: 1 1 0; min-width: 0; }
.ui-dialog-foot .bi { min-width: 0; }
.ui-dialog-foot .bi > span { min-width: 0; }
.ui-dialog-foot .auto-cd { margin: 8px 0 0; }
.modal.sx-confirm { gap: 0; }
.sx-confirm .ui-dialog-head .sd-head { padding-right: 0; }
.sx-confirm .ui-dialog-head .hr-portrait { width: 44px; height: 52px; flex: 0 0 auto; }
.sx-confirm .ui-dialog-foot .sd-cta { margin: 0; display: flex; gap: 8px; }
.sx-confirm .ui-dialog-foot .sd-cta .btn { flex: 1 1 0; min-width: 0; }
.ui-dialog-foot > .auto-cd:first-child { margin-top: 0; }
.ui-dialog-body .gb-list, .ui-dialog-body .rv-list, .ui-dialog-body .notice-history-list, .ui-dialog-body .pc-model-content { max-height: none; overflow: visible; }
.ui-dialog-body .gb-list, .ui-dialog-body .rv-list { margin-bottom: 0; }
.ui-dialog-body .pc-model-content { padding: 0; }
.ui-dialog-body .rv-filter button { min-height: 44px; }
.ui-dialog-head .menu-head { margin: 0; }
.menu-modal .ui-dialog-body { display: flex; flex-direction: column; gap: 8px; }
.menu-modal .menu-account, .menu-modal .menu-sec, .menu-modal .menu-actions, .menu-modal .menu-danger, .menu-modal .menu-credits, .menu-modal .menu-community-row { margin: 0; }
.menu-modal .menu-sec { padding: 6px 9px; }
.menu-modal .menu-audio-row { min-height: 44px; padding: 2px 0; }
.menu-modal .menu-track .chip-btn { min-height: 44px; }
.menu-modal .menu-actions { gap: 7px; }
.menu-modal .menu-actions .btn { min-height: 44px; padding: 6px 5px; }
.menu-modal .menu-danger .link-btn { min-height: 44px; }
.naming .sign-preview { margin: 4px 0 8px; }
.naming .sign-preview .sign-img { max-height: 72px; object-fit: contain; }
.naming .name-row input, .naming .name-player input { font-size: 16px; min-height: 44px; }
.naming .name-ideas .chip-btn { min-height: 44px; }
.naming .char-preview img { max-height: 80px; object-fit: contain; }

/* Daily report keeps both next-day controls visible in every tab. */
.report.rp .ui-dialog-head { padding: 8px 12px 0; }
.report.rp .rp-head h2 { font-size: 19px; margin-bottom: 6px; }
.report.rp .rp-hero { padding: 6px 8px; border-radius: 12px; }
.report.rp .rp-hero > b { font-size: 26px; }
.report.rp .rp-tabs { margin: 8px 0; padding: 2px; }
.report.rp .rp-tabs button { min-height: 44px; }
.report.rp .rp-pane { min-height: 0; }
.report.rp .ui-dialog-foot { padding: 8px 12px 10px; }
.report.rp .rp-foot { position: static; margin: 0; padding: 0; border: 0; }
.report.rp .rp-foot .rep-auto { padding: 0; margin: 0 0 6px; min-height: 32px; }
.report.rp .rep-next { gap: 8px; }
.report.rp .rep-next .btn { flex: 1 1 0; font-size: 12px; }
.report.rp .rep-next .bi { gap: 4px; }
.report.rp .rep-next .pxi { height: 14px; }

/* Event outcomes retain their full +/- descriptions and 20s countdown. */
.modal.lx-talk.ui-compact-dialog .ui-dialog-head { padding: 0; border: 0; }
.lx-talk.ui-compact-dialog > * { margin: 0; }
.lx-talk .ui-dialog-head > h2, .lx-talk .ui-dialog-head > .lx-talk-head {
  margin: 0; padding: 9px 12px; color: #fff;
  background: linear-gradient(#ffa53d, #f07b12); border-bottom: 2px solid var(--ink);
}
.lx-talk .ui-dialog-head h2 { font-size: 20px; }
.lx-talk .ui-dialog-head .lx-talk-head { gap: 8px; }
.lx-talk .ui-dialog-head .lx-talk-head img { width: 40px; }
.lx-talk .ui-dialog-head .lx-talk-head b { font-size: 18px; }
.lx-talk .ui-dialog-body { padding: 10px 12px 12px; }
.lx-talk .lx-speech { font-size: 13px; line-height: 1.45; padding: 8px 10px; margin-bottom: 8px; }
.lx-talk .lx-event-context { margin-bottom: 8px; }
.lx-talk .lx-choices { gap: 8px; }
.lx-talk .lx-choice { padding: 8px 9px; gap: 5px; border-radius: 11px; }
.lx-talk .lx-choice-label { font-size: 14px; gap: 6px; }
.lx-talk .lx-chip { font-size: 11.5px; padding: 2px 6px; }
.lx-talk .ui-dialog-foot .auto-cd span { font-size: 11.5px; }

/* Context sheets: header/close and urgent controls do not scroll away. */
#popup, body.portrait #popup {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  max-height: calc(var(--ui-vh, 100dvh) - var(--top-h) - var(--dock-h) - 18px);
}
#popup[hidden] { display: none; }
body.portrait #popup { top: auto; bottom: var(--dock-h); max-height: min(65dvh, calc(var(--ui-vh, 100dvh) - var(--top-h) - var(--dock-h) - 8px)); }
body.portrait #popup::before { display: none; }
.pp-fixed-head { flex: 0 0 auto; min-width: 0; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pp-head { min-height: 44px; }
.pp-head > div { min-width: 0; }
.pp-title { font-size: 19px; overflow-wrap: anywhere; }
.pp-title .pp-sub { display: block; font: 400 11px/1.3 var(--font); margin-top: 2px; }
.pp-head .tag { max-width: 36%; white-space: normal; text-align: center; line-height: 1.2; }
.pp-x { width: 44px; height: 44px; }
.pp-tabs { margin: 6px 0 0; padding-bottom: 2px; overflow: visible; }
.pp-tabs button { min-height: 44px; min-width: 0; }
.pp-scroll { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 10px 10px; }
.pp-scroll > .pp-box:first-child { margin-top: 0; }
#popup > .pp-foot { position: static; flex: 0 0 auto; margin: 0; padding: 8px 10px 10px; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.pp-foot .btn, .pp-foot .btn.big { min-height: 44px; margin: 0; padding: 7px 8px; font-size: 12px; white-space: normal; }
.pp-foot .btn-row { margin: 0; gap: 6px; }
.pp-foot .btn-row > .btn { flex: 1 1 0; min-width: 0; }
.pp-foot .plan-grid { gap: 6px; }
.pp-foot .plan-btn { min-height: 48px; padding: 6px; }
.pp-foot .bi { gap: 4px; }
.pp-foot .pxi { height: 12px; }
.pp-scroll .stock-row .btn { min-height: 44px; }

/* Panel navigation never depends on a hidden horizontal scroll gesture. */
.panel-head, .panel-tabs { flex: 0 0 auto; min-width: 0; }
.panel-head { padding: 5px 9px; }
.panel-head h2 { font-size: 19px; }
.panel-profile-btn { min-height: 44px; }
.panel-body { min-height: 0; min-width: 0; padding: 9px 10px 12px; }
.panel-tabs:not(.grouped-tabs) { display: grid; grid-template-columns: repeat(auto-fit, minmax(65px, 1fr)); overflow: visible; gap: 5px; padding: 7px 8px 3px; }
.panel-tabs:not(.grouped-tabs) button { min-height: 44px; min-width: 0; padding: 5px 3px; font-size: 12px; line-height: 1.2; white-space: normal; }
.panel-tabs.grouped-tabs { gap: 5px; padding: 7px 8px 0; }
.panel-primary { gap: 5px; }
.panel-secondary { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); overflow: visible; gap: 4px; padding-bottom: 6px; }
.panel-tabs.grouped-tabs button { min-width: 0; min-height: 44px; padding: 5px 2px; font-size: 11.5px; white-space: normal; }
#panel:is([data-panel="staff"], [data-panel="manage"]) .panel-tabs:not(.grouped-tabs) { grid-auto-flow: unset; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 3px; margin: 6px 8px 0; }
#panel[data-panel="manage"] .panel-primary { grid-auto-flow: unset; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 8px 0; padding: 3px; }
#panel:is([data-panel="staff"], [data-panel="manage"]) .panel-tabs:not(.grouped-tabs) button,
#panel[data-panel="manage"] .panel-primary button,
#panel[data-panel="manage"] .panel-secondary button { min-height: 44px; min-width: 0; padding: 5px 2px; font-size: 11.5px; white-space: normal; line-height: 1.2; }
#panel[data-panel="manage"] .panel-secondary { gap: 4px; padding: 0 8px 6px; }
body.portrait #panel { top: calc(var(--top-h) + 6px); bottom: var(--dock-h); height: auto; max-height: none; }
#panel[data-panel="staff"] #panel-body:has(.sx-panel-action) { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.sx-panel-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 9px 10px; }
.sx-panel-action { flex: 0 0 auto; padding: 8px 10px 10px; border-top: 1px solid var(--line); background: var(--paper); }
.sx-panel-action .btn { min-height: 44px; }

/* Leaderboard tabs show their names on phones; compact podium frees list room. */
.lb-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px 8px 8px; overflow: visible; flex: 0 0 auto; }
.lb-tabs button { min-width: 0; min-height: 44px; padding: 4px 2px; flex-direction: column; gap: 2px; white-space: normal; font-size: 10.5px; line-height: 1.2; }
.lb-tabs button span { display: inline; }
.lb-tabs button .pxi { height: 14px; }
.lb-tabs:has(> button:nth-child(6)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 600px) {
  .lb-tabs:has(> button:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lb-head { padding: 8px 10px; }
.lb-trophy .pxi { height: 26px; }
.lb-pod.p1 .lb-plinth { height: 56px; }
.lb-pod.p2 .lb-plinth { height: 42px; }
.lb-pod.p3 .lb-plinth { height: 32px; }
.lb-pager .btn { min-height: 44px; min-width: 80px; }
.lb-empty { padding: 24px 12px; }
.lb-foot { gap: 6px; padding: 7px 10px 9px; }

/* Lottery purchase and install actions stay outside long ticket/help lists. */
.modal.lottery-modal, body.portrait .modal.lottery-modal { padding: 0; }
.lt-head { padding: 9px 12px; gap: 7px; }
.lt-head h2 { font-size: 20px; text-align: left; }
.lt-head > div { min-width: 0; }
.lt-body, .lt-draw-body { flex: 1 1 auto; padding: 10px 12px; }
.lt-round { gap: 8px; margin-bottom: 10px; }
.lt-round .lt-pool { min-width: 0; padding: 7px 8px; flex: 0 0 44%; }
.lt-round .lt-pool strong { font-size: 20px; }
.lt-paper { padding: 9px 10px; }
.lt-paper p { margin: 6px 0 0; }
.lt-footer { flex: 0 0 auto; padding: 8px 12px 10px; background: #fff0cf; border-top: 2px solid #d9b67f; }
.lt-footer[hidden] { display: none; }
.lt-footer label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 800; }
.lt-footer small { display: block; margin-top: 5px; font-size: 11px; }
.lt-footer .lt-error { margin: 5px 0 0; font-size: 12px; line-height: 1.4; }
.lt-footer .lt-error:empty { display: none; }
.lt-footer .lt-purchase button { white-space: normal; }
#install-layer { top: var(--ui-vy, 0px); left: var(--ui-vx, 0px); right: auto; bottom: auto; width: var(--ui-vw, 100vw); height: var(--ui-vh, 100dvh); padding: 10px; }
.install-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; max-height: calc(var(--ui-vh, 100dvh) - 30px); }
.install-head { flex: 0 0 auto; padding: 10px 12px; gap: 8px; grid-template-columns: 44px minmax(0, 1fr) 44px; }
.install-app-icon { width: 44px; height: 44px; }
.install-head h2 { font-size: 20px; }
.install-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 12px 10px; }
.install-platform { margin: 6px 0 8px; }
.install-step { min-height: 50px; padding: 7px 9px; }
.install-footer { flex: 0 0 auto; padding: 8px 12px 10px; border-top: 1px solid #d8bc82; }
.install-actions { margin: 0; grid-template-columns: 1fr 1fr; gap: 8px; }
.install-actions .btn { min-height: 44px; white-space: normal; }
.install-note { margin-top: 7px; }
.modal.es-profile, body.portrait .modal.es-profile { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.es-profile .eprofile { display: flex; flex-direction: column; min-height: 0; }
.eprofile-head, .eprofile-foot { flex: 0 0 auto; padding: 10px 12px; }
.eprofile-head .emvp { margin: 0; padding: 8px; gap: 9px; }
.eprofile-head h2 { font-size: 19px; }
.eprofile-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 12px 10px; overscroll-behavior: contain; }
.eprofile-body .estat { grid-template-columns: 85px minmax(0, 1fr) 25px; }
.eprofile-foot { border-top: 1px solid #354b5e; }
.eprofile-foot .efoot { margin: 0; padding: 0; }
.eprofile-foot .ebtn { width: 100%; min-height: 44px; }
.bm-sheet .bm-calc .bm-row { align-items: baseline; }
.bm-sheet .bm-calc .bm-row > span { flex: 1 1 auto; min-width: 0; }
.bm-sheet .bm-calc .bm-row > b { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 380px) {
  .ui-dialog-head, .ui-dialog-body, .ui-dialog-foot { padding-left: 10px; padding-right: 10px; }
  .ui-dialog-head h2 { font-size: 19px; }
  .menu-modal .menu-audio-row { grid-template-columns: 98px minmax(0, 1fr) 34px; gap: 5px; }
  .menu-modal .menu-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-head h2 { font-size: 17px; }
  .panel-tabs.grouped-tabs button { font-size: 10.5px; }
  .pp-title { font-size: 17px; }
  .pp-scroll .stock-row { grid-template-columns: 18px minmax(0, 1fr) 24px auto; gap: 4px; }
  .pp-scroll .stock-row small { grid-column: 2; grid-row: 2; }
  .pp-scroll .stock-row .btn { grid-column: 4; grid-row: 1 / 3; }
}
@media (max-height: 520px) and (orientation: landscape) {
  body:not(.portrait) #popup { width: min(420px, 52vw); }
  .ui-dialog-head { padding-top: 7px; padding-bottom: 7px; }
  .ui-dialog-head h2 { font-size: 19px; }
  .report.rp .rp-hero { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; }
  .report.rp .rp-hero > b { font-size: 23px; }
  .report.rp .rp-flow { margin: 0; width: 100%; }
  .report.rp .ui-dialog-head { padding-top: 6px; }
  .report.rp .rp-tabs { margin: 5px 0; }
  .report.rp .rp-foot .rep-auto { min-height: 26px; margin-bottom: 4px; }
  .report.rp .ui-dialog-foot { padding-top: 5px; padding-bottom: 7px; }
  .lb-head { padding-top: 5px; padding-bottom: 5px; }
  .lb-foot .lb-mine { padding: 3px 8px; }
  .lb-podium { margin-top: 0; margin-bottom: 8px; }
  .pp-fixed-head { padding-top: 4px; padding-bottom: 5px; }
  .pp-head { min-height: 44px; }
  .pp-tabs { margin-top: 3px; }
  .pp-foot .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (pointer: coarse) {
  html[data-ui-density] :is(.modal, #panel, #social) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: 16px; }
}

/* Automatic density follows usable width AND height, not device pixels/DPR.
 * Scale headings, art and whitespace; readable text and touch targets keep
 * their minimum sizes. No whole-page zoom that would shrink hit areas. */
html:not([data-ui-density="comfortable"]) .ui-dialog-head { padding-block: calc(10px * var(--ui-scale)); }
html:not([data-ui-density="comfortable"]) .ui-dialog-head h2 { font-size: max(18px, calc(21px * var(--ui-scale))); }
html:not([data-ui-density="comfortable"]) .ui-dialog-body { padding-block: calc(10px * var(--ui-scale)); }
html:not([data-ui-density="comfortable"]) .menu-modal .menu-sec { padding: calc(6px * var(--ui-scale)) 8px; }
html:not([data-ui-density="comfortable"]) .panel-head { padding-block: 3px; }
html:not([data-ui-density="comfortable"]) .panel-head h2 { font-size: max(16px, calc(19px * var(--ui-scale))); }
html:not([data-ui-density="comfortable"]) #panel:is([data-panel="staff"], [data-panel="manage"]) .panel-body { font-size: 12px; }
html:not([data-ui-density="comfortable"]) #panel[data-panel="staff"] .sx { gap: 6px; }
html:not([data-ui-density="comfortable"]) #panel[data-panel="staff"] .sx-card { padding: 6px; gap: 4px; border-radius: 10px; }
html:not([data-ui-density="comfortable"]) #panel[data-panel="staff"] .sx-role-select { font-size: 13px; padding: 5px 8px; }
html:not([data-ui-density="comfortable"]) #panel[data-panel="staff"] .sx-card > h3 { font-size: 11px; margin: 0; line-height: 1.2; }
html:not([data-ui-density="comfortable"]) #panel[data-panel="staff"] .sx-card:has(> .sx-role-select) { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 7px; }
html:not([data-ui-density="comfortable"]) #panel[data-panel="staff"] .sx-card .sx-h { font-size: 10px; line-height: 1.2; }
html:not([data-ui-density="comfortable"]) #panel[data-panel="staff"] .sx-recruit-summary b { font-size: 16px; }
html:not([data-ui-density="comfortable"]) #panel[data-panel="staff"] .sx-panel-action .btn { font-size: 13px; padding: 7px; }
html:not([data-ui-density="comfortable"]) #panel[data-panel="staff"] .sx-seg button { font-size: 12px; padding: 4px 2px; }
html:not([data-ui-density="comfortable"]) .sx-panel-scroll { padding: 6px 8px; }
html:not([data-ui-density="comfortable"]) #panel[data-panel="manage"] .sign-head { margin-bottom: 6px; }
html:not([data-ui-density="comfortable"]) #panel[data-panel="manage"] .owner-profile-card { padding: 7px 9px; gap: 7px; }
html:not([data-ui-density="comfortable"]) #panel[data-panel="manage"] .owner-profile-card img { max-height: 48px; max-width: 42px; object-fit: contain; }
html:not([data-ui-density="comfortable"]) #panel[data-panel="manage"] .sign-head .sign-img { max-height: 64px; object-fit: contain; }
html:not([data-ui-density="comfortable"]) #panel[data-panel="manage"] .chart.small { height: 72px; }
html:not([data-ui-density="comfortable"]) .modal .bg-sheet-head { padding-block: 8px; }
html:not([data-ui-density="comfortable"]) .bg-sheet-head .bg-item-icon { width: 44px; height: 44px; }
html:not([data-ui-density="comfortable"]) .sd-shell .sd-name h2 { font-size: max(17px, calc(20px * var(--ui-scale))); }
html:not([data-ui-density="comfortable"]) .sd-shell { gap: 6px; }
html:not([data-ui-density="comfortable"]) .ki-section { padding: 8px; margin-bottom: 8px; }
html:not([data-ui-density="comfortable"]) .ki-section h3 { font-size: max(16px, calc(18px * var(--ui-scale))); }
html:not([data-ui-density="comfortable"]) .lt-head h2 { font-size: max(17px, calc(20px * var(--ui-scale))); }
html:not([data-ui-density="comfortable"]) .lt-round h3 { font-size: 13px; }
html:not([data-ui-density="comfortable"]) .lb-head .lb-title { font-size: max(17px, calc(21px * var(--ui-scale))); }
html[data-ui-density="tight"] .ui-dialog-body, html[data-ui-density="tight"] .pp-scroll { font-size: 12px; }
html[data-ui-density="tight"] .modal .btn.big { font-size: 15px; }

/* Responsive title + guide cards: compact artwork, reachable controls. */
#title-screen {
  inset: auto; top: var(--ui-vy, 0px); left: var(--ui-vx, 0px);
  width: var(--ui-vw, 100vw); height: var(--ui-vh, 100dvh);
  overflow-y: auto; overscroll-behavior: contain;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
#title-screen .title-box { flex: 0 0 auto; margin-block: auto; }
#title-screen .btn, #title-screen #online-link-google, #title-screen #online-logout { min-height: 44px; }
#title-screen #online-link-google { font-size: 16px; }
#title-screen #online-account-name { overflow-wrap: anywhere; }
#guide-card {
  display: flex; flex-direction: column;
  max-height: calc(var(--ui-vh, 100dvh) - var(--top-h) - var(--dock-h) - 20px);
  padding-bottom: 0;
}
#guide-card .gc-head { flex: 0 0 auto; gap: 7px; padding: 6px 8px; }
#guide-card .gc-x { width: 44px; height: 44px; }
#guide-card .gc-ti b { overflow-wrap: anywhere; font-size: 16px; }
#guide-card .gc-body { flex: 1 1 auto; min-height: 0; margin: 0; padding: 8px 10px; overflow-y: auto; overscroll-behavior: contain; }
#guide-card .gc-btns { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; margin: 0 8px; }
#guide-card .gc-btns .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px; font-size: 13px; line-height: 1.25; white-space: normal; }
#guide-card .gc-off { flex: 0 0 auto; min-height: 44px; margin: 0; padding: 6px 8px; font-size: 12px; }
@media (max-width: 600px), (max-height: 520px) {
  #title-screen .title-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #title-screen .logo { grid-column: 1 / -1; padding: 10px 8px; border-radius: 16px; }
  #title-screen .logo-sub { font-size: 18px; letter-spacing: 1.5px; }
  #title-screen .logo-main { font-size: clamp(36px, 10vw, 48px); }
  #title-screen .title-btns { grid-column: 1 / -1; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #title-screen :is(#online-auth, #t-continue, #t-new, #t-save-info) { grid-column: 1 / -1; }
  #title-screen .title-btns:has(#t-delete[hidden]) #t-community { grid-column: 1 / -1; }
  #title-screen .btn.big, #title-screen .btn.small { font-size: 18px; padding: 6px 8px; margin: 0; min-width: 0; white-space: normal; }
  #title-screen #t-support { margin-top: 0 !important; }
  #title-screen :is(#t-support, #t-install) { width: 100%; }
  #title-screen .online-auth { padding: 8px; margin: 0; }
  #title-screen .online-auth-title b { font-size: 11px; }
  #title-screen .online-status { font-size: 16px; margin-top: 5px; }
  #title-screen .online-auth-actions { gap: 6px; margin-top: 6px; }
  #title-screen .online-auth.signed-in .online-auth-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #title-screen .online-auth.signed-in .online-identity { min-width: 0; }
  #title-screen .online-auth.signed-in .online-auth-actions:has(#online-link-google[hidden]) .online-identity { grid-column: 1 / -1; }
  #title-screen .online-auth.signed-in #online-logout { grid-column: 1 / -1; }
  #title-screen .online-auth .btn { font-size: 17px; min-height: 44px; padding: 6px; }
  #title-screen #online-link-google { min-height: 44px; width: 100%; font-size: 17px; }
  #title-screen #online-logout { font-size: 16px; padding: 6px 2px; }
}
@media (min-width: 601px) and (max-height: 520px) {
  #title-screen .title-box { width: min(740px, 100%); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 8px 16px; }
  #title-screen .logo { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  #title-screen .title-btns { grid-column: 2; grid-row: 1 / 5; align-self: center; }
  #title-screen #t-support { grid-column: 1; grid-row: 3; }
  #title-screen #t-install { grid-column: 1; grid-row: 4; }
}
@media (max-width: 600px) and (max-height: 520px) {
  #title-screen .logo { padding-block: 6px; }
  #title-screen .logo-sub { font-size: 16px; }
  #title-screen .logo-main { font-size: 32px; }
}
/* End responsive title + guide cards. */