/* Phone screens use the full viewport. Landscape keeps the approved canvas scale;
   portrait reflows the existing controls without changing game state or art. */
.pc-mode:is(.phone-portrait,.phone-landscape) #pcViewport{border:0}
.pc-mode:is(.phone-portrait,.phone-landscape) #pcStage{border:0}

.pc-mode.phone-portrait .layout{display:block;width:100%;height:100%}
.pc-mode.phone-portrait .right-rail{display:none}
.pc-mode.phone-portrait.dev-rail-visible .right-rail{display:block;position:absolute;top:0;right:0;bottom:0;width:min(280px,calc(100% - 20px));height:auto;z-index:45;box-shadow:-15px 0 35px #000b}
.pc-mode.phone-portrait.dev-local .dev-rail-toggle{position:absolute;right:6px;bottom:70px;z-index:24;min-width:62px;height:29px;padding:3px 7px;font-size:10px}
.pc-mode.phone-portrait.dev-local .mobile-town{right:74px}
.pc-mode.phone-portrait .game-frame{display:grid;width:100%;height:100%;grid-template-rows:60px 46px minmax(0,1fr) 64px;overflow:hidden}
.pc-mode.phone-portrait .topbar{grid-row:1;height:60px;padding:7px 10px;gap:4px}
.pc-mode.phone-portrait .wordmark{min-width:0;max-width:170px;padding:0}
.pc-mode.phone-portrait .topbar .game-logo{width:155px;max-width:100%;height:auto}
.pc-mode.phone-portrait .head-actions{gap:3px}
.pc-mode.phone-portrait .head-actions .icon-btn{width:34px;height:34px;min-width:34px;min-height:34px;padding:2px}
.pc-mode.phone-portrait .head-actions .game-rpg-icon{width:24px;height:24px}
.pc-mode.phone-portrait .resources{position:relative;grid-row:2;top:auto;left:auto;right:auto;width:100%;height:46px;min-width:0;padding:4px 7px;display:flex;justify-content:space-around;align-items:center;gap:3px;overflow-x:auto;border-bottom:1px solid #947c4d55}
.pc-mode.phone-portrait .resource{display:grid;grid-template-columns:22px max-content;grid-template-rows:18px 13px;column-gap:3px;min-width:0;font-size:11px}
.pc-mode.phone-portrait .resource small{font-size:9px;line-height:12px}
.pc-mode.phone-portrait .resource b{line-height:18px}
.pc-mode.phone-portrait .currency-icon{width:22px;height:22px}
.pc-mode.phone-portrait #main{grid-row:3;min-width:0;min-height:0;height:auto;padding:12px;overflow:auto;scrollbar-gutter:auto}
.pc-mode.phone-portrait #main[data-screen=home]{overflow:auto}
.pc-mode.phone-portrait .bottom-nav{grid-row:4;height:64px;min-width:0;padding:3px 2px;gap:2px;justify-content:space-around}
.pc-mode.phone-portrait .nav-btn{flex:1 1 0;max-width:none;min-width:0;height:57px;padding:2px 1px;display:flex;flex-direction:column;gap:1px;font-size:max(var(--ui-min-font),11px);line-height:1.1;white-space:nowrap}
.pc-mode.phone-portrait .nav-btn .nav-icon-frame{width:34px;height:34px}
.pc-mode.phone-portrait .nav-btn .game-rpg-icon{width:29px;height:29px}
.pc-mode.phone-portrait .nav-btn .nav-label{line-height:13px}
.pc-mode.phone-portrait .version-line{display:none}
.pc-mode.phone-portrait .mobile-town{display:block;position:absolute;right:6px;bottom:70px;z-index:20;min-height:28px;padding:4px 9px;font-size:10px;opacity:.92}
.pc-mode.phone-portrait .save-notice:not([hidden]){top:106px}
.pc-mode.phone-portrait .game-frame:has(#main[data-screen=battle]) .resources{left:auto;right:auto;gap:3px}

.pc-mode.phone-portrait .pc-home{display:flex;flex-direction:column;width:100%;height:auto;min-height:100%;padding:15px 12px;gap:16px;background-position:center top}
.pc-mode.phone-portrait .pc-home-center{order:1;padding:0}
.pc-mode.phone-portrait .pc-home-heading{margin-bottom:10px}
.pc-mode.phone-portrait .pc-home-heading h1{font-size:22px;margin:3px 0}
.pc-mode.phone-portrait .pc-party{width:100%;gap:5px;justify-content:space-between;align-items:flex-start}
.pc-mode.phone-portrait .pc-party-card,.pc-mode.phone-portrait .pc-party-card:first-child{flex:1 1 0;width:auto;min-width:0}
.pc-mode.phone-portrait .pc-party-card strong{font-size:12px;margin-top:6px;overflow-wrap:anywhere}
.pc-mode.phone-portrait .pc-party-card small{font-size:10px}
.pc-mode.phone-portrait .pc-unit-label{font-size:9px;letter-spacing:0;padding:2px 4px;margin-bottom:5px;white-space:nowrap}
.pc-mode.phone-portrait .pc-party-power{margin:12px 0 0}
.pc-mode.phone-portrait .pc-party-power b{font-size:18px;margin:0 4px}
.pc-mode.phone-portrait .pc-home-right{order:2;display:flex;flex-direction:column;align-items:stretch;gap:12px;justify-content:flex-start;padding:14px;border:1px solid #a8925b88;background:linear-gradient(140deg,#1e3030e8,#101d1edb);box-shadow:0 12px 24px #0006}
.pc-mode.phone-portrait .pc-menu{width:100%;min-width:0;min-height:46px;gap:12px}
.pc-mode.phone-portrait .pc-menu b{font-size:15px}
.pc-mode.phone-portrait .pc-menu small{font-size:10px}
.pc-mode.phone-portrait .pc-menu .pc-medallion{width:42px;height:42px;min-width:42px}
.pc-mode.phone-portrait .pc-home-left{order:3;gap:10px;padding:0}
.pc-mode.phone-portrait .pc-home-secondary[open]>div{position:static;width:100%;max-height:240px;margin-top:7px;overflow-y:auto;overflow-x:hidden;box-shadow:inset 0 4px 12px #0005}
.pc-mode.phone-portrait .pc-home-footer{order:4;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:0;padding:8px}
.pc-mode.phone-portrait .pc-home-footer>span{grid-column:1/-1}
.pc-mode.phone-portrait .pc-chat-preview,.pc-mode.phone-portrait .pc-explore{width:100%;min-width:0;max-width:none}
.pc-mode.phone-portrait .pc-explore{gap:4px;font-size:11px}

.pc-mode.phone-portrait .xp-row{max-width:none}
.pc-mode.phone-portrait .content-nav,.pc-mode.phone-portrait .equipment-tabs,.pc-mode.phone-portrait .rune-grade-tabs{max-width:100%;overflow-x:auto;flex-wrap:nowrap}
.pc-mode.phone-portrait .content-nav button,.pc-mode.phone-portrait .equipment-tabs button,.pc-mode.phone-portrait .rune-grade-tab{flex:none;white-space:nowrap}
.pc-mode.phone-portrait #main[data-screen=atlas]>.topline{position:static;margin:8px 0}
.pc-mode.phone-portrait .pc-atlas{display:grid;grid-template-columns:1fr;gap:12px}
.pc-mode.phone-portrait .pc-atlas .atlas-list{max-height:none}
.pc-mode.phone-portrait .mode-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-mode.phone-portrait .pc-equipment{display:flex;flex-direction:column;height:auto;min-height:0;gap:12px}
.pc-mode.phone-portrait .pc-loadout,.pc-mode.phone-portrait .pc-inventory,.pc-mode.phone-portrait .pc-equipment-detail{width:100%;min-width:0;overflow:visible}
.pc-mode.phone-portrait .pc-inventory .appraisal-callout{grid-template-columns:48px minmax(0,1fr);gap:8px}
.pc-mode.phone-portrait .pc-inventory .appraisal-callout img{width:48px;height:48px;max-width:48px;max-height:48px}
.pc-mode.phone-portrait .pc-inventory .appraisal-callout button{grid-column:1/-1;width:100%}
.pc-mode.phone-portrait .bag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-mode.phone-portrait .pc-growth{grid-template-columns:1fr;gap:12px}
.pc-mode.phone-portrait .shop-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-mode.phone-portrait #main[data-screen=market]>.bag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-mode.phone-portrait .rune-forge-workspace{grid-template-columns:1fr}
.pc-mode.phone-portrait .rune-collection{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-mode.phone-portrait .rune-synthesis-list{grid-template-columns:1fr}
.pc-mode.phone-portrait .rune-summon-layout{grid-template-columns:minmax(0,1fr);gap:12px}
.pc-mode.phone-portrait .rune-sanctum{min-width:0;min-height:260px}
.pc-mode.phone-portrait .rune-summon-actions{min-width:0}
.pc-mode.phone-portrait .rune-summon-showcase{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-mode.phone-portrait #main:has(.rune-forge-workspace){overflow:auto}
.pc-mode.phone-portrait .rune-menu:has(.rune-forge-workspace){display:flex;flex-direction:column;flex:none;min-height:0;overflow:auto}
.pc-mode.phone-portrait .rune-menu:has(.rune-forge-workspace)>.rune-wallet{position:static;margin:0}
.pc-mode.phone-portrait .rune-forge-workspace{grid-column:auto;min-height:auto;overflow:visible}
.pc-mode.phone-portrait .rune-forge-roster{grid-column:auto;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible}
.pc-mode.phone-portrait .rune-materials{grid-template-columns:repeat(3,minmax(0,1fr));height:auto;max-height:250px}
.pc-mode.phone-portrait #main[data-screen=result]{display:flex;flex-direction:column}
.pc-mode.phone-portrait #main[data-screen=result]>section.content-detail,.pc-mode.phone-portrait #main[data-screen=result]>.result-loot{grid-column:auto;grid-row:auto;width:100%}
.pc-mode.phone-portrait #main[data-screen=battle]{padding:8px 10px;overflow:auto}
.pc-mode.phone-portrait #main[data-screen=battle] .battle-top{position:static;left:auto;top:auto;max-width:none;margin:0 0 7px;pointer-events:auto}
.pc-mode.phone-portrait #main[data-screen=battle] .battle-top h2{font-size:18px}
.pc-mode.phone-portrait #main[data-screen=battle] .battle-field{height:430px;min-height:430px;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:2px;padding:7px}
.pc-mode.phone-portrait .battle-field>.unit-row{gap:5px;min-width:0}
.pc-mode.phone-portrait .combat-unit{width:100%;min-width:0;grid-template-columns:50px minmax(0,1fr);grid-template-rows:24px 8px 8px 18px;column-gap:4px;min-height:70px}
.pc-mode.phone-portrait .combat-unit .portrait{width:48px;max-width:48px;height:63px}
.pc-mode.phone-portrait .battle-controls{gap:5px;flex-wrap:wrap;padding:5px;min-height:0}
.pc-mode.phone-portrait .battle-controls label{font-size:10px}
.pc-mode.phone-portrait .exploration-heading{top:12px;left:10px;right:10px}
.pc-mode.phone-portrait .exploration-heading h2{font-size:20px;margin:4px 0}
.pc-mode.phone-portrait .exploration-heading p{font-size:12px}
.pc-mode.phone-portrait .exploration-party{gap:3px;bottom:-10px;height:250px}
.pc-mode.phone-portrait .explorer{width:106px;height:235px}
.pc-mode.phone-portrait .explorer:first-child{width:120px;height:250px}
.pc-mode.phone-portrait .explorer-body img{width:220px;top:-20px}
.pc-mode.phone-portrait .explorer:first-child .explorer-body img{width:250px;top:-25px}
.pc-mode.phone-portrait .explorer figcaption{bottom:52px;font-size:12px}

.pc-mode.phone-portrait #modalRoot{position:absolute;inset:0}
.pc-mode.phone-portrait .modal-backdrop,.pc-mode.phone-portrait .modal-backdrop[data-kind=item]{padding:8px;justify-content:center;align-items:center}
.pc-mode.phone-portrait .modal,.pc-mode.phone-portrait .modal.wide,.pc-mode.phone-portrait .modal-backdrop[data-kind=item] .modal{width:100%;max-width:100%;max-height:calc(100% - 16px);min-width:0;padding:15px;overflow:auto}
.pc-mode.phone-portrait .item-dialog-grid,.pc-mode.phone-portrait .modal-backdrop[data-kind=item] .item-dialog-grid{display:block}
.pc-mode.phone-portrait .item-growth-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-mode.phone-portrait #toast{max-width:calc(100% - 16px)}

.pc-mode.phone-portrait .prologue-cutscene,.pc-mode.phone-portrait .chapter-story-cutscene{width:100%;height:100%;max-width:100%;max-height:100%}
.pc-mode.phone-portrait .prologue-heading{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:4px 10px;top:16px;left:18px;right:18px}
.pc-mode.phone-portrait .prologue-heading small{padding-top:3px;font-size:11px;letter-spacing:2px;white-space:nowrap}
.pc-mode.phone-portrait .prologue-heading h2{min-width:0;font-size:18px;line-height:1.3;word-break:keep-all}
.pc-mode.phone-portrait .prologue-chapters{grid-column:1/-1;justify-self:end;margin:3px 0 0}

/* Q2-02-20: portrait synthesis also uses only the main page scrollbar. */
.pc-mode.phone-portrait #main:has(.rune-forge-workspace){display:block;overflow-y:auto}
.pc-mode.phone-portrait .rune-menu:has(.rune-forge-workspace){display:block;min-height:0;overflow:visible;padding:10px}
.pc-mode.phone-portrait .rune-menu:has(.rune-forge-workspace)>.rune-wallet{position:static;margin:0 0 9px}
.pc-mode.phone-portrait .rune-forge-workspace{display:block;min-height:0;overflow:visible}
.pc-mode.phone-portrait .rune-material-stage{min-height:0;overflow:visible;padding:10px}
.pc-mode.phone-portrait .rune-materials,.pc-mode.phone-portrait .rune-materials:has(> :nth-child(4)){grid-template-columns:repeat(3,minmax(0,1fr));height:auto;max-height:none;overflow:visible;gap:5px}
.pc-mode.phone-portrait .rune-materials .rune-card,.pc-mode.phone-portrait .rune-materials .rune-empty-slot{min-height:0;aspect-ratio:135/173}
.pc-mode.phone-portrait .rune-forge-controls{position:static;margin-top:10px;display:flex;flex-direction:column;gap:6px;padding:10px}
.pc-mode.phone-portrait .rune-forge-roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible;margin-top:10px;padding:8px}

/* Keep the result wallet and full-reveal guidance readable on narrow screens. */
.pc-mode.phone-portrait [data-kind="rune-forge-result"] .modal{grid-template-rows:52px 48px minmax(0,1fr) 112px}
.pc-mode.phone-portrait [data-kind="rune-forge-result"] .modal:has(>.rune-tutorial-guide){grid-template-rows:52px auto 48px minmax(0,1fr) 112px}
.pc-mode.phone-portrait [data-kind="rune-forge-result"] .rune-forge-summary{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:0 7px}
.pc-mode.phone-portrait [data-kind="rune-forge-result"] .rune-forge-owned{flex-basis:100%;text-align:center;font-size:13px;line-height:20px}
.pc-mode.phone-portrait [data-kind="rune-forge-result"] .rune-forge-summary .rune-wallet{display:flex;justify-content:center;gap:8px;white-space:normal;font-size:11px;line-height:19px}
.pc-mode.phone-portrait [data-kind="rune-forge-result"] .rune-forge-footer:has(>button.primary){grid-template-rows:20px 42px auto;min-height:0}
.pc-mode.phone-portrait [data-kind="rune-forge-result"] .rune-forge-footer:has(>button.primary)>small{line-height:1.25;white-space:normal}

/* Approved one-screen mobile portrait home (UX 32). Keep the original desktop home for rotation. */
.pc-mode .ux-mobile-home{display:none}
.pc-mode.phone-portrait #main[data-screen=home]{padding:9px 12px 7px;overflow:auto}
.pc-mode.phone-portrait #main[data-screen=home]>.pc-home{display:none}
.pc-mode.phone-portrait .ux-mobile-home{display:flex;flex-direction:column;gap:7px;min-height:100%;border:1px solid #91794a;background:linear-gradient(#1b2928e8,#172724ed),var(--home-art) center/cover;padding:9px;color:#eadfbe}
.pc-mode.phone-portrait .ux-mobile-goal{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:53px;padding:6px 8px;border:1px solid #746447;background:#27392f}
.pc-mode.phone-portrait .ux-mobile-goal>div{min-width:0;flex:1}
.pc-mode.phone-portrait .ux-mobile-goal small{display:block;font-size:11px;color:#b7c39e}.pc-mode.phone-portrait .ux-mobile-goal strong{display:block;font-size:15px;color:#f5d794;line-height:1.2}.pc-mode.phone-portrait .ux-mobile-goal button{flex:none;min-height:31px;padding:5px;font-size:11px}
.pc-mode.phone-portrait .ux-mobile-goal button.full{width:100px;max-width:100px}
.pc-mode.phone-portrait .ux-mobile-home>h2{text-align:center;font-size:24px;color:#f4dfac;margin:3px 0}
.pc-mode.phone-portrait .ux-mobile-home>.pc-party{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:start;width:100%}
.pc-mode.phone-portrait .ux-mobile-home .pc-party-card,.pc-mode.phone-portrait .ux-mobile-home .pc-party-card:first-child{width:100%;min-width:0;min-height:0;border:1px solid #a88b54;background:#1b2a29;padding:4px 3px}
.pc-mode.phone-portrait .ux-mobile-home .pc-unit-label{font-size:11px;letter-spacing:0;margin:0 0 3px;padding:0;background:none}
.pc-mode.phone-portrait .ux-mobile-home .pc-home-portrait{width:100%;height:105px;aspect-ratio:auto;border-width:2px}
.pc-mode.phone-portrait .ux-mobile-home .pc-party-card strong{font-size:13px;margin:3px 0 0;line-height:1.1}
.pc-mode.phone-portrait .ux-mobile-home .pc-party-card small{font-size:11px;line-height:1.1}
.pc-mode.phone-portrait .ux-mobile-home .pc-party-card .hp-track{height:4px;margin-top:3px}.pc-mode.phone-portrait .ux-mobile-home .pc-party-card .mp-track{height:3px;margin:2px 0}
.pc-mode.phone-portrait .ux-mobile-home .pc-party-card .unit-level{display:block;font-size:11px}
.pc-mode.phone-portrait .ux-mobile-home>.pc-party-power{font-size:14px;color:#f0d28d;margin:0;text-align:center}.pc-mode.phone-portrait .ux-mobile-home>.pc-party-power b{font-size:17px;margin:0 3px}
.pc-mode.phone-portrait .ux-mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.pc-mode.phone-portrait .ux-mobile-actions button{width:100%;min-width:0;min-height:43px;max-height:48px;gap:3px;padding:4px;font-size:12px}.pc-mode.phone-portrait .ux-mobile-actions .pc-explore svg{width:16px;height:16px}
.pc-mode.phone-portrait .ux-mobile-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.pc-mode.phone-portrait .ux-mobile-menu button{min-height:43px;border:1px solid #806d4b;background:#243530;color:#e8d39e;font-size:13px}
.pc-mode.phone-portrait .ux-mobile-more{border:1px solid #6e805e;background:#1d2d2a;color:#d9c694;font-size:11px}.pc-mode.phone-portrait .ux-mobile-more summary{cursor:pointer;padding:5px 8px;min-height:29px}.pc-mode.phone-portrait .ux-mobile-more[open]{flex:1;min-height:0;overflow:auto}.pc-mode.phone-portrait .ux-mobile-more .pc-next-action{margin:5px;padding:7px}.pc-mode.phone-portrait .ux-mobile-more .pc-home-secondary{margin:5px;padding:7px}
.pc-mode.phone-portrait .ux-mobile-chat{display:block;flex:none;width:100%;min-height:29px;max-height:32px;border:1px solid #5e715d;padding:5px 7px;color:#bdd0b7;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-mode.phone-portrait #pcStage:has(#main[data-screen=home])>.mobile-town{display:none}
.pc-mode.phone-portrait.dev-local .game-frame:has(#main[data-screen=home]) .dev-rail-toggle{display:none}