/* R176: deck-specific original art and a single, aligned count row. */
#deck-body[data-mode=list]>.deck-sheet-header{position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:64px;min-height:64px;padding:0 12px;gap:0}
#deck-body[data-mode=list] .sheet-title{grid-area:1/1;margin:0;padding:0 60px;text-align:center}
#deck-body[data-mode=list] .deck-slot-count{grid-area:1/1;justify-self:start;display:flex;gap:4px;align-items:baseline;margin:0 0 0 12px;font:500 12px/1.2 var(--font-ui);color:#6d6455}
#deck-body[data-mode=list] .deck-slot-count b{font-size:20px;color:#342c20}
#deck-body[data-mode=list]>.deck-sheet-scroll{padding:12px 16px 18px}
.saved-deck-list{display:grid;gap:12px;margin:0}
.saved-deck-list>.saved-deck{--control-kind:deck-entry-ivory;display:grid;grid-template-columns:clamp(52px,12vw,78px) minmax(0,1fr);align-items:center;gap:12px;min-width:0;padding:16px 14px;border:0;border-radius:0;background:none;box-shadow:none;isolation:isolate}
.saved-deck .saved-deck-preview{--control-kind:none;display:grid;place-items:center;width:100%;min-width:44px;min-height:100px;padding:0;border:0;background:none;box-shadow:none;touch-action:pan-y pinch-zoom}
.saved-deck-preview>.game-card{width:100%;pointer-events:none;transform:rotate(-3deg);filter:drop-shadow(1px 3px 3px #382b1e45)}
.saved-deck .saved-deck-info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;min-width:0}
.saved-deck-info>.saved-deck-name{grid-column:1/-1;display:block;overflow:hidden;margin:0;font-size:17px;line-height:1.3;font-weight:750;color:#342c20;text-overflow:ellipsis;white-space:nowrap}
.saved-deck-info>.saved-deck-hero{grid-column:1/-1;display:block;margin:0;font-size:12px;line-height:1.3;color:#75664d}
.saved-deck-loadout{grid-column:1;grid-row:3/5;display:grid;grid-template-columns:repeat(2,clamp(35px,9.6vw,46px));align-content:center;justify-content:start;gap:4px;margin:2px 0 0}
.saved-deck-loadout>.game-card{width:100%;pointer-events:none}
.saved-deck-loadout>.saved-deck-size{grid-column:1/-1;text-align:center;white-space:nowrap;font:700 14px/1.2 var(--font-ui);color:#51452f}
.saved-deck-info>.saved-deck-budget{grid-column:2;grid-row:3;display:block;align-self:end;margin:0;padding:2px 0 3px}
.saved-deck-budget>.deck-size{display:none}
.saved-deck-budget .deck-cost-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0 0 6px;font-size:12px;line-height:1.25;color:#51452f}
.saved-deck-budget .deck-cost-value{font:750 15px/1.2 var(--font-stats);font-variant-numeric:tabular-nums;color:#51452f}
.saved-deck-budget .deck-cost-track{height:8px;background:#312a20}
.saved-deck-budget .deck-cost-fill{background:#c5a35d;box-shadow:none}
.saved-deck-budget .deck-cost-thumb{width:6px;height:6px;right:-3px}
.saved-deck-info>.saved-deck-actions{grid-column:2;grid-row:4;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px;align-items:center;align-self:start;margin:0}
#deck-dialog .saved-deck-actions>.saved-deck-choose{--control-kind:deck-action-ivory;width:100%;min-width:0;min-height:44px;margin:0;padding:5px 6px;border:0;background:none;box-shadow:none;color:#342c20;font:750 13px/1.2 var(--font-ui);letter-spacing:0;white-space:nowrap}
#deck-dialog .saved-deck[data-selected=true] .saved-deck-choose{--control-kind:deck-action-dark;opacity:1;color:#fff6e6;cursor:default}
.saved-deck[data-selected=true] .saved-deck-choose::before{content:none}
#deck-dialog .saved-deck-actions>.saved-deck-edit{--control-kind:deck-stepper-ivory;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;border:0;background:none;color:#51412b;box-shadow:none}
.saved-deck-edit>.button-icon{width:22px;height:22px;margin:0}
.saved-deck-info>.saved-deck-status{grid-column:1/-1;margin:0;color:#934326;font-size:12px;line-height:1.4}
.saved-deck-info>.saved-deck-status[hidden]{display:none}
.saved-deck-empty{display:grid;place-items:center;width:100%;aspect-ratio:2/3;border:1px dashed #aa906b;border-radius:7px;background:#d6c9ac33;color:#806c47}
.saved-deck-empty>.button-icon{width:28px;height:28px}

/* All ordinary deck actions share one jewel-free silhouette. */
#deck-dialog .deck-sheet-footer :is(.primary-action,.secondary-action),
.deck-delete-confirm :is(.deck-delete-confirm-action,.deck-delete-cancel){--control-kind:deck-action-ivory;border:0;border-image:none;background:none;box-shadow:none;border-radius:0;color:#342c20;min-height:48px;padding:8px 14px}
.deck-delete-confirm .deck-delete-confirm-action.primary-action{--control-kind:deck-action-dark;color:#fff1df}
.deck-delete-confirm .deck-sheet-actions{grid-template-columns:1fr 1fr}
#deck-dialog .deck-sheet-actions{grid-template-columns:1fr 1fr}

/* The playmat owns the entire fixed region. Insets belong to its controls. */
#deck-dialog .editor-fixed{padding:10px 16px 6px;border:0;min-width:0}
#deck-dialog .editor-fixed.has-cosmetics{background-size:100% 100%,100% 100%;background-repeat:no-repeat;background-origin:border-box;background-clip:border-box}
#deck-dialog .editor-fixed>.deck-name-input{margin-bottom:8px}
#deck-dialog .editor-tabs{gap:8px;margin-top:6px}
#deck-dialog .editor-types{gap:8px;margin-top:6px}
#deck-dialog .cosmetics-editor-controls{gap:8px;margin:4px 0}
#deck-dialog .editor-fixed .cosmetics-control{--control-kind:deck-action-ivory;min-width:0;padding-inline:6px}
#deck-dialog .editor-fixed .editor-filters>.editor-delete-chip{--control-kind:deck-action-dark;color:#fff1df}
#deck-dialog :is(.deck-status .deck-size,.editor-fixed .deck-size){font-size:14px;line-height:1.3;font-weight:750}
#deck-dialog .deck-status .deck-cost-label{font-size:12px;line-height:1.3}
#deck-dialog .deck-status .deck-cost-value{font:750 15px/1.3 var(--font-stats);font-variant-numeric:tabular-nums}
#deck-dialog .editor-fixed .deck-status :is(.deck-size,.deck-cost-label,.deck-cost-value){color:#fff4de;text-shadow:0 1px 3px #000}
#deck-dialog .editor-fixed>.deck-status{padding:6px 0 8px}
#deck-dialog :is(.editor-copy-remove,.editor-unequip){--control-kind:deck-remove-round;border-radius:50%;color:#fff6df;font-size:19px;line-height:1}
#deck-dialog :is(.editor-copy-remove,.editor-unequip)>.control-art-layer{inset:8px!important;width:28px;height:28px}
#deck-dialog :is(.editor-copy-remove,.editor-unequip)>.button-icon{width:14px;height:14px}
#deck-dialog .editor-copy-strip{height:112px}
#deck-dialog .editor-copy-track{padding-top:18px;padding-bottom:4px}
#deck-dialog .editor-copy{width:52px;flex-basis:52px}
#deck-dialog .editor-card-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:18px 12px}
#deck-dialog .editor-scroll{padding:14px 16px 18px}
#deck-dialog .editor-card-controls{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:0;height:auto;min-height:0;margin-top:6px;overflow:visible}
#deck-dialog #deck-body .editor-card-controls .quantity-button{--control-kind:deck-stepper-ivory;justify-self:stretch;align-self:stretch;width:100%;height:auto;min-width:0;min-height:0;aspect-ratio:1;margin:0;padding:0;font-size:21px;line-height:1;color:#342c20}
#deck-dialog #deck-body .editor-card-controls .quantity-button>.button-icon{width:18px;height:18px;margin:0}
#deck-dialog .editor-card .editor-card-controls .editor-card-used{--control-kind:deck-stepper-ivory;position:relative;inset:auto;transform:none;align-self:stretch;width:100%;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#342c20;font:800 18px/1 var(--font-ui);font-variant-numeric:tabular-nums}
#deck-dialog .editor-card-selected .editor-card-controls .editor-card-used{--control-kind:deck-counter-gold;color:#fff;font-weight:850;text-shadow:0 1px 2px #6f420a}
#deck-dialog .editor-card-remaining{top:6px;right:3px;display:grid;place-items:center;min-width:30px;min-height:26px;padding:3px 6px;background:#191611e8;color:#fff5df;font:750 14px/1 var(--font-ui);font-variant-numeric:tabular-nums;border:0;border-radius:5px}
#deck-dialog .editor-card-controls:has(>.editor-choose-hero){display:flex}
#deck-dialog .editor-card-controls>.editor-choose-hero{--control-kind:deck-action-ivory;color:#342c20;font-size:13px}
#deck-dialog .editor-card-controls>.editor-choose-hero[aria-pressed=true]{--control-kind:deck-action-dark;color:#fff6e6}

@media(max-width:350px){
 #deck-body[data-mode=list]>.deck-sheet-scroll{padding-inline:10px}
 .saved-deck-list>.saved-deck{grid-template-columns:48px minmax(0,1fr);gap:8px;padding:13px 10px}
 .saved-deck .saved-deck-info{column-gap:8px}
 .saved-deck-info>.saved-deck-name{font-size:15px}
 .saved-deck-info>.saved-deck-hero{font-size:11px}
 .saved-deck-info>.saved-deck-actions{gap:4px}
 #deck-dialog .saved-deck-actions>.saved-deck-choose{font-size:12px;padding-inline:3px}
 #deck-dialog .editor-fixed{padding-inline:12px}
 #deck-dialog .editor-scroll{padding-inline:10px}
 #deck-dialog .editor-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:6px}
}
@media(max-height:640px){
 #deck-dialog .editor-fixed{padding-top:6px;padding-bottom:0;row-gap:0}
 #deck-dialog .editor-fixed>.deck-name-input{margin-bottom:0}
 #deck-dialog .editor-copy-strip{height:84px}
 #deck-dialog .editor-copy{width:40px;flex-basis:40px}
 #deck-dialog .editor-copy-track{padding-top:16px;padding-bottom:0}
 #deck-dialog .editor-fixed :is(.editor-tabs,.editor-types){gap:4px;margin-top:4px}
 #deck-dialog .editor-fixed>.deck-status{padding:4px 0 5px}
 #deck-dialog .editor-scroll{padding-top:10px}
}
/* On phones the name and cosmetic icons share a row; six short tabs share
   another. This gives the catalogue its height without moving any controls out
   of the fixed overview or shrinking a touch target. */
@media(max-width:569px){
 #deck-dialog .editor-fixed{display:grid;grid-template-columns:minmax(0,1fr) 140px;column-gap:8px;row-gap:0}
 #deck-dialog .editor-fixed>*{grid-column:1/-1;min-width:0}
 #deck-dialog .editor-fixed>.deck-name-input{grid-column:1;grid-row:1;margin-bottom:0;font-size:14px;padding-inline:8px}
 #deck-dialog .editor-fixed>.cosmetics-editor-controls{grid-column:2;grid-row:1;margin:0;gap:4px;grid-template-columns:repeat(3,minmax(0,1fr))}
 #deck-dialog .editor-fixed .cosmetics-control{--control-kind:deck-stepper-ivory;padding:0;gap:0;min-width:44px;width:44px;height:44px}
 #deck-dialog .editor-fixed .cosmetics-control>span:not(.cosmetics-control-thumb){display:none}
 #deck-dialog .editor-fixed>.editor-tabs{grid-row:4;grid-column:1}
 #deck-dialog .editor-fixed>.editor-types{grid-row:4;grid-column:2;margin-top:4px}
 #deck-dialog .editor-fixed:not(:has(>.editor-types))>.editor-tabs{grid-column:1/-1}
 #deck-dialog .editor-fixed :is(.editor-tabs,.editor-types){gap:4px;margin-top:4px}
 #deck-dialog .editor-fixed :is(.editor-tab,.editor-type){padding-inline:2px;font-size:12px}
 #deck-dialog .editor-fixed>.editor-filters{grid-row:5}
 #deck-dialog .editor-copy-strip{height:90px}
 #deck-dialog .editor-copy{width:42px;flex-basis:42px}
 #deck-dialog .editor-copy-track{padding-top:16px;padding-bottom:0}
}
@media(min-width:570px){
 #deck-dialog .editor-copy-strip{height:96px}
 #deck-dialog .editor-fixed>.deck-name-input{margin-bottom:0}
 #deck-dialog .editor-fixed{padding-top:8px;padding-bottom:2px}
 #deck-dialog .editor-copy-track{padding-top:15px;padding-bottom:0}
}
/* Small-height devices retain a complete quantity-row viewport even with the
   largest tested system insets; the existing catalogue remains scrollable. */
@media(max-height:640px){
 #deck-dialog{--popup-bar-height:52px}
 #deck-dialog>.dialog-close{top:4px}
 #deck-body[data-mode]>.deck-sheet-header{min-height:52px;grid-template-rows:52px}
 #deck-dialog .editor-copy-strip{height:76px}
 #deck-dialog .editor-copy{width:36px;flex-basis:36px}
 #deck-dialog .editor-copy-track{gap:10px}
 #deck-dialog .deck-sheet-footer{padding-block:8px}
}