/* Camp and growth use the same native actions on PC and narrow screens. */
#dialog[data-view=upgrade] .upgrade-status .sub{margin:0;font-size:13px;line-height:1.6}
#dialog[data-view=upgrade] .growth-study{display:grid;gap:7px;padding:14px;border:1px solid #bcad84;border-radius:10px;background:#efe9d4;color:#526047;margin:12px 0}
#dialog[data-view=upgrade] .growth-study b{font-size:15px}
#dialog[data-view=upgrade] .growth-study small{font-size:12px;line-height:1.55}
#dialog[data-view=upgrade] .growth-study label{display:flex;align-items:center;gap:12px;font-size:13px}
#dialog[data-view=upgrade] .growth-study select{min-height:38px;max-width:100%;padding:7px 10px;border:1px solid #b6a674;border-radius:7px;background:#fffaed;color:#4d5d45;font:inherit}
#dialog[data-view=upgrade] .growth-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#355744;font-size:17px;line-height:1.4;margin:0 0 12px}
#dialog[data-view=upgrade] .growth-section-title small{font-size:12px;font-weight:400;color:#776b50}
#dialog[data-view=upgrade] #upgradeDetail h3{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;font-size:18px;line-height:1.5}
#dialog[data-view=upgrade] #upgradeDetail h3 small{font-size:12px;white-space:nowrap;font-weight:400}
#dialog[data-view=upgrade] .upgrade-detail-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
#dialog[data-view=upgrade] .upgrade-detail-tabs button{min-height:38px;padding:8px 12px;border:1px solid #bcac7f;border-radius:7px;background:#fbf5e6;color:#665d43;font-size:13px}
#dialog[data-view=upgrade] .upgrade-detail-tabs [aria-selected=true]{color:#315740;background:#e7edda;border-color:#668863;box-shadow:inset 0 0 0 1px #668863}
#dialog[data-view=upgrade] #upgradeDetail [hidden]{display:none!important}
#dialog[data-view=upgrade] #upgradeDetail p{font-size:14px;line-height:1.6;margin:0 0 10px}
#dialog[data-view=upgrade] #upgradeDetail small{font-size:12px;line-height:1.55}
#dialog[data-view=upgrade] #upgradeDetail .upgrade-mastery,#dialog[data-view=upgrade] #upgradeDetail .upgrade-companion{padding:10px 12px;border-left:3px solid #c7a85c;background:#fcf5df;margin-top:10px}
#dialog[data-view=upgrade] .upgrade-empty{padding:20px 0;color:#526047}
#dialog[data-view=upgrade] .upgrade-empty strong{display:block;font-size:17px;margin-bottom:14px}
#dialog[data-view=camp] .camp-notes .sub{margin:0 0 5px;font-size:15px;line-height:1.5;color:#415d45}
#dialog[data-view=camp] .camp-notes .checkpoint-note{margin:0 0 12px;font-size:12px;line-height:1.6}

@media(min-width:1000px) and (min-height:620px){
 #dialog.game-screen:is([data-view=camp],[data-view=upgrade]) .screen-body{display:flex;flex-direction:column;gap:12px;overflow:auto;scrollbar-gutter:auto}
 #dialog[data-view=camp] .camp-notes{display:flex;justify-content:space-between;align-items:center;gap:20px;flex:none}
 #dialog[data-view=camp] .camp-notes .sub,#dialog[data-view=camp] .camp-notes .checkpoint-note{margin:0}
 #dialog[data-view=camp] .camp-notes .checkpoint-note{padding:0;border:0;background:none;border-radius:0}
 #dialog[data-view=camp] .camp-summary.popup-scene{min-height:80px;--scene-height:80px;padding:14px 16px;margin:0;gap:16px;flex:none}
 #dialog[data-view=camp] .camp-summary>.ui-illustration{width:50px;height:50px;object-fit:contain;flex:none}
 #dialog[data-view=camp] .camp-summary>div{flex:1;min-width:0}
 #dialog[data-view=camp] .camp-summary h3{font-size:18px;line-height:1.4;margin:0 0 5px}
 #dialog[data-view=camp] .camp-summary p{font-size:13px;line-height:1.6;margin:0}
 #dialog[data-view=camp] .camp-summary button{min-height:44px;padding:11px 20px!important;margin:0!important}
 #dialog[data-view=camp] .camp-planning{display:grid;grid-template-columns:1fr 1fr;gap:20px;flex:1;min-height:0}
 #dialog[data-view=camp] .camp-planning>section{display:flex;flex-direction:column;min-width:0;min-height:0;gap:12px}
 #dialog[data-view=camp] .camp-section-title{margin:0!important;font-size:17px;line-height:1.5}
 #dialog[data-view=camp] .route-options,#dialog[data-view=camp] .camp-choices{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;margin:0;flex:1;min-height:0}
 #dialog[data-view=camp] .route-options button{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:14px 16px!important;min-height:0;border-image:none;border:1px solid #baab80;background:#faf3df var(--art-paper);border-radius:10px;box-shadow:inset 0 0 0 2px #fff9ed;position:relative}
 #dialog[data-view=camp] .route-options button:before{display:none!important}
 #dialog[data-view=camp] .route-options strong{font-size:16px;line-height:1.4;margin:0;padding-right:54px}
 #dialog[data-view=camp] .route-options small{font-size:13px;line-height:1.6;display:block}
 #dialog[data-view=camp] .route-options button[aria-pressed=true]{background:#eaf0dd;outline:2px solid #5d825b;outline-offset:-2px}
 #dialog[data-view=camp] .route-options button[aria-pressed=true]:after{content:'已选择';position:absolute;left:auto;right:14px;top:13px;width:auto;height:auto;padding:0;background:none;color:#477041;font-size:12px;border:0;transform:none;filter:none;box-shadow:none}
 #dialog[data-view=camp] .camp-choices .choice{display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:5px 14px;padding:14px 16px!important;min-height:0;border:1px solid #baab80;border-image:none;border-radius:10px;background:#faf3df var(--art-paper);box-shadow:inset 0 0 0 2px #fff9ed}
 #dialog[data-view=camp] .camp-choices .camp-supply-art{grid-column:1;grid-row:1/3;position:static!important;width:46px;height:50px;margin:0;object-fit:contain;align-self:center}
 #dialog[data-view=camp] .camp-choices .choice strong{grid-column:2;font-size:16px;line-height:1.4;margin:0;padding:0 54px 0 0}
 #dialog[data-view=camp] .camp-choices .choice p{grid-column:2;font-size:13px;line-height:1.6;margin:0}
 #dialog[data-view=camp] .camp-choices .choice.is-selected{border-width:1px!important;box-shadow:inset 0 0 0 1px #5d825b!important}
 #dialog[data-view=camp] .camp-choices .choice[aria-pressed=true]:after{content:'已选择';top:13px;right:14px;width:auto;height:auto;border:0;padding:0;background:none;box-shadow:none;color:#477041;font-size:12px;line-height:1.5}
 #dialog:is([data-view=camp],[data-view=upgrade]) .choice:hover{transform:none}

 #dialog[data-view=upgrade] .upgrade-status{display:flex;align-items:center;gap:16px;flex:none}
 #dialog[data-view=upgrade] #upgradeProgress{flex:none;margin:0;padding:9px 12px;line-height:1.5;font-size:13px}
 #dialog[data-view=upgrade] .upgrade-status>.sub{font-size:13px;line-height:1.6;margin:0!important}
 #dialog[data-view=upgrade] .growth-study{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 16px;margin:0;padding:0;border:0;border-radius:0;background:none;flex:none}
 #dialog[data-view=upgrade] .growth-study>b{grid-column:1;grid-row:1}
 #dialog[data-view=upgrade] .growth-study>label{grid-column:2;grid-row:1;justify-content:flex-end}
 #dialog[data-view=upgrade] .growth-study>small{grid-column:1;margin:0}
 #dialog[data-view=upgrade] .growth-study>small:last-child{grid-column:1/-1}
 #dialog[data-view=upgrade] .upgrade-workspace{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;flex:1;min-height:0}
 #dialog[data-view=upgrade] .upgrade-candidates{display:flex;flex-direction:column;min-width:0;min-height:0}
 #dialog[data-view=upgrade] .growth-section-title{flex:none;margin:0 0 10px}
 #dialog[data-view=upgrade] .choices.four-choices{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;margin:0;flex:1;min-height:0}
 #dialog[data-view=upgrade] .choice{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto 1fr;align-content:start;gap:3px 10px;min-height:0!important;padding:14px!important;border:1px solid #bcab7f;border-image:none;border-radius:10px;background:#faf3df var(--art-paper);box-shadow:inset 0 0 0 2px #fff9ed}
 #dialog[data-view=upgrade] .choice .glyph{grid-column:1;grid-row:1/3;position:static!important;width:42px!important;height:42px!important;margin:0!important}
 #dialog[data-view=upgrade] .choice .category{grid-column:2;grid-row:1;font-size:12px;line-height:1.35;margin:0!important;padding:0!important;text-align:left;border:0;background:none}
 #dialog[data-view=upgrade] .choice strong{grid-column:2;grid-row:1;font-size:16px!important;line-height:1.35;margin:0;padding:0;overflow-wrap:anywhere}
 #dialog[data-view=upgrade] .choice p{grid-column:1/-1;grid-row:3;font-size:13px;line-height:1.55;margin:6px 0 0!important;align-self:start}
 #dialog[data-view=upgrade] .choice .rank{grid-column:2;grid-row:2;font-size:12px;line-height:1.4;margin:0!important;padding:0;border:0;align-self:end}
 #dialog[data-view=upgrade] .choice.is-selected{border-width:1px!important;box-shadow:inset 0 0 0 1px #5d825b!important}
 #dialog[data-view=upgrade] .choice[aria-pressed=true]:after{display:none}
 #dialog[data-view=upgrade] #upgradeDetail{min-width:0;min-height:0;padding:16px;margin:0;border:1px solid #b9aa81;border-radius:10px;background:#f0efdc;overflow:visible}
 #dialog[data-view=upgrade] #upgradeDetail h3{font-size:17px}
 #dialog[data-view=upgrade] #upgradeDetail p{font-size:13px;line-height:1.6}
 #dialog[data-view=upgrade] #upgradeDetail .upgrade-detail-category{font-size:12px;line-height:1.4;color:#7b6c4f;margin:0 0 4px}
 #dialog[data-view=upgrade] #upgradeDetail .upgrade-mastery,#dialog[data-view=upgrade] #upgradeDetail .upgrade-companion{padding:8px 10px;margin-top:8px}
 #dialog[data-view=upgrade] .screen-footer #reroll{min-height:44px;margin:0;padding:10px 18px!important;font-size:14px}

 #dialog.game-screen:is([data-view=siteintro],[data-view=side]){width:min(960px,calc(100vw - 48px));height:auto;max-height:calc(100dvh - 40px)}
 #dialog:is([data-view=siteintro],[data-view=side]) .popup-vignette{padding:24px;min-height:240px;--scene-height:240px;margin:0}
 #dialog:is([data-view=siteintro],[data-view=side]) .popup-copy{width:65%}
 #dialog[data-view=siteintro] .popup-copy{display:grid;grid-template-columns:43px minmax(0,1fr);gap:12px;width:65%}
 #dialog[data-view=siteintro] .popup-identity-icon{grid-column:1;grid-row:1/3;float:none;margin:0;align-self:start}
 #dialog[data-view=siteintro] .popup-copy .popup-title,#dialog[data-view=siteintro] .popup-copy .sub{grid-column:2;margin:0!important}
 #dialog:is([data-view=siteintro],[data-view=side]) .popup-title{letter-spacing:0!important;line-height:1.5!important}
 #dialog:is([data-view=siteintro],[data-view=side]) .popup-vignette .sub{font-size:15px;line-height:1.8}
 #dialog:is([data-view=siteintro],[data-view=side]) .screen-footer>p{margin:0 0 12px;font-size:13px}
 #dialog:is([data-view=siteintro],[data-view=side]) .dialog-actions{gap:12px}
 #dialog:is([data-view=siteintro],[data-view=side]) .dialog-actions button{min-height:44px;padding:12px 20px!important}
}
/* Short desktop windows keep the same complete choices, using rows inside each card. */
@media(min-width:1100px) and (min-height:650px) and (max-height:699px){
 #dialog[data-view=camp] .camp-summary.popup-scene{min-height:60px;padding:10px 14px;gap:12px}
 #dialog[data-view=camp] .camp-summary>.ui-illustration{width:36px;height:36px}
 #dialog[data-view=camp] .camp-summary>div{display:flex;align-items:center;gap:16px}
 #dialog[data-view=camp] .camp-summary h3{font-size:16px;margin:0;white-space:nowrap}
 #dialog[data-view=camp] .camp-summary p{font-size:13px;margin:0}
 #dialog[data-view=camp] .camp-summary button{min-height:40px;padding:9px 16px!important}
 #dialog[data-view=camp] .route-options button,#dialog[data-view=camp] .camp-choices .choice{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto;align-items:center;align-content:center;gap:12px;padding:10px 12px!important}
 #dialog[data-view=camp] .route-options strong,#dialog[data-view=camp] .camp-choices .choice strong{grid-column:1;grid-row:1;padding:0;font-size:15px;line-height:1.5}
 #dialog[data-view=camp] .route-options small,#dialog[data-view=camp] .camp-choices .choice p{grid-column:2;grid-row:1;font-size:13px;line-height:1.6;margin:0}
 #dialog[data-view=camp] .camp-choices .camp-supply-art{display:none}
 #dialog[data-view=camp] .route-options button[aria-pressed=true]:after,#dialog[data-view=camp] .camp-choices .choice[aria-pressed=true]:after{display:none}
 #dialog[data-view=upgrade] .growth-study select{min-height:34px;padding:5px 10px}
 #dialog[data-view=upgrade] #upgradeProgress{padding:0;border:0;border-radius:0;background:none;line-height:1.6}
 #dialog[data-view=upgrade] .growth-section-title{margin-bottom:8px}
 #dialog[data-view=upgrade] .choice{padding:12px!important;grid-template-columns:36px minmax(0,1fr);column-gap:8px}
 #dialog[data-view=upgrade] .choice .glyph,#dialog[data-view=upgrade] .choice .glyph img{width:36px!important;height:36px!important}
 #dialog[data-view=upgrade] .choice p{margin-top:4px!important}
 #dialog[data-view=upgrade] #upgradeDetail{padding:14px}
}

/* Match preparation cards: large left artwork, vertically centered beside text. */
#dialog[data-view=upgrade] .choice{--pick-icon-size:clamp(64px,5vw,72px);display:grid;grid-template-columns:var(--pick-icon-size) minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;align-items:center;gap:6px 12px;text-align:left}
#dialog[data-view=upgrade] .choice .glyph{grid-column:1;grid-row:1/4;position:static!important;align-self:center;float:none;width:var(--pick-icon-size)!important;height:var(--pick-icon-size)!important;min-width:0;margin:0!important}
#dialog[data-view=upgrade] .choice .glyph img{display:block;width:100%!important;height:100%!important;object-fit:contain}
#dialog[data-view=upgrade] .choice strong{grid-column:2;grid-row:1;min-width:0;margin:0;padding:0;overflow-wrap:anywhere}
#dialog[data-view=upgrade] .choice p{grid-column:2;grid-row:3;min-width:0;margin:0!important;align-self:start}
#dialog[data-view=upgrade] .choice .rank{grid-column:2;grid-row:2;min-width:0;margin:0!important;align-self:center}
@media(max-width:700px){
 #dialog[data-view=upgrade] .choice{--pick-icon-size:56px;column-gap:10px}
 #dialog[data-view=upgrade] .choices.four-choices{grid-template-columns:minmax(0,1fr)!important}
}
@media(min-width:1000px) and (min-height:620px) and (max-height:699px){
 #dialog[data-view=upgrade] .choice{row-gap:4px}
 #dialog[data-view=upgrade] .choice strong{font-size:15px!important}
 #dialog[data-view=upgrade] .choice p{font-size:12px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}