/* GZ-002: layout follows the actual visible rectangle, including in-app browsers. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
:root[data-compact="true"] .upg-head { top:var(--safe-top,0px); height:76px; padding:7px 0 0; justify-content:flex-start; gap:3px; }
:root[data-compact="true"] .upg-head > * { flex-shrink:0; }
:root[data-compact="true"] .upg-title { font-size:28px; line-height:1.1; margin:0; }
:root[data-compact="true"] .upg-sub { font-size:12px; line-height:1.25; margin:0; }
:root[data-compact="true"] .upg-ornament { height:64px; top:0; }
:root[data-compact="true"] .team-upgrade-summary { position:static; transform:none; font-size:9px; gap:8px; line-height:14px; }
:root[data-compact="true"] .upg-body { top:calc(80px + var(--safe-top,0px)); bottom:max(10px,var(--safe-bottom)); }
:root[data-compact="true"] .upg-detail { overflow:hidden; overscroll-behavior:contain; padding-bottom:2px; }
:root[data-compact="true"] .upg-detail > * { flex-shrink:0; }
:root[data-compact="true"] .upg-stats { flex:1 1 0; min-height:28px; max-height:none; overflow:auto; }
:root[data-compact="true"] .upg-detail .bevel-button { position:relative; bottom:0; z-index:5; margin-top:8px; min-height:36px; height:36px; font-size:21px; background:linear-gradient(135deg,#605139,#b5965c 45%,#756040); }
:root[data-compact="true"] .upg-pause { position:absolute; top:8px; font-size:10px; }
:root[data-portrait="true"] .portrait-warning { display:block; top:0; width:100%; text-align:center; height:27px; padding:5px 8px; font:11px/17px sans-serif; letter-spacing:0; }
:root[data-portrait="true"] .selection { --footer:calc(124px + var(--safe-bottom)); --edge-left:max(12px,var(--safe-left)); --edge-right:max(12px,var(--safe-right)); }
:root[data-portrait="true"] .sel-top { top:27px; height:48px; min-height:0; }
:root[data-portrait="true"] .brand-mark { font-size:27px; }
:root[data-portrait="true"] .brand-page { font-size:17px; }
:root[data-portrait="true"] .sel-brand { gap:12px; }
:root[data-portrait="true"] .sel-brand i { height:22px; }
:root[data-portrait="true"] .icon-button { width:28px; height:28px; padding:6px; }
:root[data-portrait="true"] .sel-stage { top:78px; display:block; overflow:auto; overscroll-behavior:contain; padding:0 var(--edge-right) 14px var(--edge-left); }
:root[data-portrait="true"] .sel-portrait { height:190px; width:100%; }
:root[data-portrait="true"] .selection .sel-portrait img { height:270%; max-width:none; width:auto; top:0; left:50%; transform:translateX(-50%); object-fit:contain; }
:root[data-portrait="true"] .selection:not([data-character="liang"]):not([data-character="xie"]) .sel-portrait img { height:125%; }
:root[data-portrait="true"] .sel-info { margin:0; padding:12px 8px; border-left:0; gap:8px; overflow:visible; }
:root[data-portrait="true"] .sel-info::before { display:none; }
:root[data-portrait="true"] .sel-info h2 { font-size:28px; white-space:normal; }
:root[data-portrait="true"] .selection #characterRole { font-size:12px; padding:4px 12px; }
:root[data-portrait="true"] .skill-list { gap:9px; margin:0; }
:root[data-portrait="true"] .skill-list li { grid-template-columns:38px minmax(0,1fr); gap:10px; padding:9px 4px; }
:root[data-portrait="true"] .skill-icon { width:36px; height:36px; }
:root[data-portrait="true"] .skill-list strong { font-size:17px; line-height:1.35; letter-spacing:0; }
:root[data-portrait="true"] .skill-list p { font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
:root[data-portrait="true"] .skill-demo { flex:none; margin:0; }
:root[data-portrait="true"] .demo-stage { height:75px; min-height:75px; }
:root[data-portrait="true"] .sel-bottom { grid-template-columns:22px minmax(0,1fr) 22px; grid-template-rows:68px 40px; gap:5px; padding:5px var(--edge-right) max(6px,var(--safe-bottom)) var(--edge-left); }
:root[data-portrait="true"] .sel-roster { padding:4px; gap:10px; }
:root[data-portrait="true"] .sel-arrow { width:22px; font-size:28px; }
:root[data-portrait="true"] #depart { grid-column:1 / -1; min-height:38px; height:38px; font-size:21px; padding:6px; white-space:nowrap; }
:root[data-portrait="true"] .roster-name { font-size:9px; }
:root[data-portrait="true"] .upg-head { inset:30px 0 auto; height:85px; padding:6px 0; justify-content:flex-start; gap:4px; }
:root[data-portrait="true"] .upg-title { font-size:28px; margin:0; }
:root[data-portrait="true"] .upg-sub { font-size:13px; }
:root[data-portrait="true"] .team-upgrade-summary { position:static; transform:none; font-size:9px; gap:8px; }
:root[data-portrait="true"] .upg-pause { display:none; }
:root[data-portrait="true"] .upg-body { inset:118px max(12px,var(--safe-right)) max(12px,var(--safe-bottom)) max(12px,var(--safe-left)); display:flex; flex-direction:column; overflow:auto; gap:14px; padding:4px; }
:root[data-portrait="true"] .upg-cards { min-height:220px; height:220px; flex:0 0 220px; gap:8px; }
:root[data-portrait="true"] .upg-copy strong { font-size:14px; letter-spacing:0; white-space:normal; text-align:center; }
:root[data-portrait="true"] .upg-copy em { font-size:10px; letter-spacing:0; text-align:center; }
:root[data-portrait="true"] .upg-detail { overflow:visible; flex:0 0 auto; padding:0; border:0; gap:8px; }
:root[data-portrait="true"] .upg-detail h2 { font-size:25px; }
:root[data-portrait="true"] .upg-stats { flex:none; max-height:none; }
:root[data-portrait="true"] .upg-desc { font-size:13px; }
:root[data-portrait="true"] .upg-detail .bevel-button { flex:none; height:44px; font-size:23px; }
:root[data-compact="true"] .sel-stage { overflow:hidden; }
:root[data-compact="true"] .sel-info { overflow:auto; overscroll-behavior:contain; padding-bottom:6px; }
:root[data-compact="true"] .sel-info > * { flex-shrink:0; }
:root[data-compact="true"] .skill-demo { flex:0 0 65px; }
.sel-bottom { z-index:5; }
:root[data-compact="true"][data-short="true"] .upg-detail { display:flex; overflow:hidden; gap:3px; }
:root[data-compact="true"][data-short="true"] .upg-detail h2 { font-size:20px; padding-bottom:3px; }
:root[data-compact="true"][data-short="true"] .upg-banner,
:root[data-compact="true"][data-short="true"] .upg-owner,
:root[data-compact="true"][data-short="true"] .upg-flavor { display:none; }
:root[data-compact="true"][data-short="true"] .upg-stats { flex:1 1 35px; min-height:28px; overflow:auto; }
:root[data-compact="true"][data-short="true"] .upg-desc { flex:0 0 2.9em; height:2.9em; min-height:2.9em; max-height:2.9em; font-size:11px; line-height:1.45; }
:root[data-compact="true"][data-short="true"] .upg-detail .bevel-button { position:relative; flex:0 0 34px; min-height:34px; height:34px; margin-top:2px; }