/* Use the original ImageGen surfaces. Frame paint is not content padding. */
.loadout-footer-copy{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
#dialog[data-view=loadout] .loadout-footer-copy #screenHint{margin:0;font-size:12px;line-height:1.5;color:#6f644c}
@media(min-width:1100px) and (min-height:650px){
 #dialog.game-screen[data-view=loadout]{padding:12px!important}
 #dialog.game-screen[data-view]>.screen-header,#characterSelect.cs-pc .cs-header{height:76px;min-height:76px;padding:14px 104px 14px 34px;margin:0;gap:16px;box-sizing:border-box;align-items:center;border-image-width:10px 88px 10px 23px}
 #dialog.game-screen[data-view] .screen-identity{gap:12px;align-items:center;flex:none}
 #dialog.game-screen[data-view] .screen-identity>div{display:flex;flex-direction:column;justify-content:center;gap:2px}
 #dialog.game-screen[data-view] .screen-header .screen-path{font-size:11px;line-height:14px;margin:0;letter-spacing:1px}
 #dialog.game-screen[data-view] .screen-header h2{font-size:22px!important;line-height:28px;margin:0;white-space:nowrap}
 #dialog.game-screen[data-view] .screen-emblem{width:40px;height:40px;display:grid;place-items:center;padding:3px;box-sizing:border-box;flex:none}
 #dialog.game-screen[data-view] .screen-emblem>.ui-emblem-art{display:block;width:32px;height:32px;max-width:100%;max-height:100%;object-fit:contain;margin:0}
 #dialog.game-screen[data-view] .screen-header .screen-back,#characterSelect.cs-pc .cs-close{display:inline-flex;align-items:center;justify-content:center;min-height:40px;height:40px;padding:8px 16px;margin:0;line-height:20px;font-size:13px;flex:none}
 #dialog.game-screen[data-view] .screen-status{margin:0;font-size:12px;line-height:20px}
 #dialog[data-view=loadout] .screen-header .character-pick{margin:0;max-width:none;padding:0;gap:10px;min-width:0;align-items:center}
 #dialog[data-view=loadout] .screen-header .character-pick select{flex:0 1 196px}
 #dialog[data-view=loadout] .screen-header .character-pick small{font-size:11px;line-height:1.5}
 #characterSelect.cs-pc .cs-header-art{width:40px;height:40px;padding:3px;object-fit:contain;flex:none}
 #characterSelect.cs-pc .cs-header h2{font-size:22px;line-height:28px;margin:0}
 #characterSelect.cs-pc .cs-eyebrow{font-size:11px;line-height:14px;margin:0 0 2px}
 /* Image surfaces are shared; individual controls keep their existing dimensions. */
 #dialog.game-screen[data-view] button,#dialog.game-screen[data-view] [role=button],#dialog.game-screen[data-view] a:is(.secondary,.primary,.gallery-entry),#characterSelect.cs-pc button{
  border-color:transparent!important;border-style:solid;border-image:var(--art-card) 96 fill / 8px / 0 stretch!important;
  background:transparent!important;color:#5b523c!important;box-shadow:none!important;text-shadow:none;transition:filter .15s;transform:none!important;
 }
 #dialog.game-screen[data-view] :is(button,[role=button]):is([aria-selected=true],[aria-pressed=true],.picked,.is-selected),#characterSelect.cs-pc button:is([aria-pressed=true],.is-selected){border-image:var(--art-gold) 84 fill / 9px / 0 stretch!important;color:#59431f!important}
 #dialog.game-screen[data-view] :is(button,a).primary,#characterSelect.cs-pc .cs-confirm{border-image:var(--art-gold) 84 fill / 16px / 0 stretch!important;color:#62451f!important}
 #dialog.game-screen[data-view] .screen-header .screen-back,#characterSelect.cs-pc .cs-close{border-image-width:11px!important}
 #dialog.game-screen[data-view] :is(button,[role=button]):hover:not(:disabled),#characterSelect.cs-pc button:hover:not(:disabled){filter:brightness(1.035)}
 #dialog.game-screen[data-view] :is(button,[role=button]):active:not(:disabled),#characterSelect.cs-pc button:active:not(:disabled){filter:brightness(.97)}
 #dialog.game-screen[data-view] button:disabled,#characterSelect.cs-pc button:disabled{opacity:.5;filter:saturate(.45);cursor:not-allowed}
 #dialog.game-screen[data-view] :is(button,[role=button]):focus-visible,#characterSelect.cs-pc button:focus-visible{outline:3px solid #357c70!important;outline-offset:2px!important}
 #dialog.game-screen[data-view] :is(.pc-result-tabs,.upgrade-detail-tabs,.pc-learning-pagination,.pc-reference-pages,.equipment-pc-nav) button,
 #characterSelect.cs-pc :is(.cs-pager,.cs-detail-tabs) button{display:inline-flex;align-items:center;justify-content:center;text-align:center}
 #dialog.game-screen[data-view] .loadout-text-button{padding:5px 9px;border-width:1px;line-height:1.4}
 #dialog.game-screen[data-view] .loadout-selected-slot{border-image-width:5px!important}
 #dialog.game-screen[data-view] .loadout-card .pick-check{right:8px;top:8px}
 #dialog.game-screen[data-view] .loadout-card.is-inspected{outline:2px solid #477f69;outline-offset:-3px}
 #characterSelect.cs-pc .cs-check{right:5px;top:5px}
 /* Homepage actions use the same images, including the checkpoint continuation. */
 #home.home button,#home.home a:is(.gallery-entry,.gallery-button){border-color:transparent!important;border-style:solid;border-image:var(--art-card) 96 fill / 8px / 0 stretch!important;background:transparent!important;color:#5b523c!important;box-shadow:none!important;text-shadow:none}
 #home.home #continueCamp,#home.home:not(.has-checkpoint) #start{border-image:var(--art-gold) 84 fill / 15px / 0 stretch!important;color:#62451f!important}
 #home.home #exportCheckpoint{padding-inline:10px;text-decoration:none}
 #home.home .home-account .rank-account{padding:8px 12px;display:inline-flex;align-items:center;justify-content:center}
 #home.home #announcementRetry{min-height:30px;padding:6px 10px;line-height:18px;text-decoration:none}
 #sitebar button{border:1px solid transparent;border-image:var(--art-card) 96 fill / 8px / 0 stretch;background:transparent;color:#5b523c;box-shadow:none;min-height:36px;padding:8px 14px;line-height:18px}
 #sitebar button[aria-pressed=true]{border-image-source:var(--art-gold);border-image-slice:84 fill}
 #home.home button:disabled{opacity:.5}
 /* Keep each school's combat palette and cooldown layers; paint its control frame. */
 #hud button,#resourceNotice button{border-color:transparent!important;border-image:var(--art-card) 96 / 8px / 0 stretch!important;box-shadow:none!important}
 #hud #pause{border-image:var(--art-gold) 84 fill / 12px / 0 stretch!important;background:transparent!important;color:#62451f!important}
 #hud .hud-build-pages button{display:flex;align-items:center;justify-content:center}
 #hud #qixiuParty .qx-party-heading button{min-height:28px;padding:4px 10px;display:inline-flex;align-items:center;justify-content:center}
}
/* Small desktops spend their limited height on the text, not repeated chrome. */
@media(min-width:1100px) and (min-height:650px) and (max-height:760px){
 #dialog[data-view=loadout] .screen-steps{padding-block:0;min-height:28px}
 #dialog[data-view=loadout] .screen-steps span{padding-block:3px}
 #dialog[data-view=loadout] .screen-body{padding-top:8px;gap:7px}
 #dialog[data-view=loadout] .loadout-workspace{grid-template-columns:minmax(0,1fr) 330px;gap:16px}
 #dialog[data-view=loadout] .loadout-setup{padding:8px 10px}
 #dialog[data-view=loadout] .loadout-section-heading{margin-bottom:5px}
 #dialog[data-view=loadout] .loadout-section-heading h3{line-height:1.2}
 #dialog[data-view=loadout] .loadout-setting-fields{gap:6px 8px}
 #dialog[data-view=loadout] .loadout-setting-fields label{line-height:1.2;gap:3px}
 #dialog[data-view=loadout] .loadout-setting-fields select{height:28px;padding:3px 7px}
 #dialog[data-view=loadout] .screen-footer{padding-block:8px}
}
@media(min-width:1100px) and (min-height:650px) and (max-height:699px){
 #dialog[data-view=loadout] .loadout-workspace{grid-template-columns:minmax(0,1fr) 350px;gap:14px}
 #dialog[data-view=loadout] .screen-header .character-pick label{display:none}
 #dialog[data-view=loadout] .screen-header .character-pick select{flex-basis:172px}
 #dialog[data-view=loadout] .screen-header .character-pick small{max-width:180px}
 #dialog[data-view=loadout] .loadout-reference-tools{min-height:26px}
 #dialog[data-view=loadout] .screen-footer{padding-block:6px}
 #dialog.game-screen[data-view=camp]>.screen-body{padding-block:10px;gap:10px}
 #dialog.game-screen[data-view=upgrade]>.screen-body{padding-block:12px}
 #dialog[data-view=codex] .pc-reference-categories button{padding-inline:12px}
 #dialog[data-view=loadout] .loadout-inspector{position:relative}
 #dialog[data-view=loadout] .loadout-inspector-heading{position:absolute;right:12px;top:10px;padding:0;border:0}
 #dialog[data-view=loadout] .loadout-inspector-heading>span:first-child{display:none}
 #dialog[data-view=loadout] .loadout-inspector-title{padding-right:40px;margin-top:4px}
}
/* Narrow layouts still constrain the image inside its own emblem. */
@media(max-width:1099px),(max-height:649px){
 #dialog.game-screen[data-view] .screen-emblem>.ui-emblem-art{width:calc(100% - 6px);height:calc(100% - 6px);max-width:100%;max-height:100%;object-fit:contain;display:block}
}
