/* The existing deck loadout remains fixed while cosmetics use its own subview. */
.editor-fixed.has-cosmetics{background-size:auto,cover;background-repeat:no-repeat;isolation:isolate}
.has-cosmetics .editor-loadout{filter:drop-shadow(0 2px 4px #1714105a)}
.has-cosmetics .deck-name-input,.has-cosmetics .deck-status{text-shadow:none}
.cosmetics-editor-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0 0 6px}
.cosmetics-control{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:36px;padding:3px 5px;border:1px solid #aa85456b;border-radius:6px;color:var(--kit-ink,#292724);background:linear-gradient(#f4f0e6dc,#f4f0e6ec);font-size:10px;line-height:1.2;white-space:nowrap;box-shadow:inset 0 1px #b08a4909}
.cosmetics-control-thumb{display:block;flex:none;width:24px;height:27px;overflow:hidden;border-radius:3px;box-shadow:0 1px 3px #17141029}
.cosmetics-control[data-cosmetic-kind=playmat] .cosmetics-control-thumb{width:29px;height:23px}
.cosmetics-control[data-cosmetic-kind=coin] .cosmetics-control-thumb{width:27px;border-radius:50%}
.cosmetic-image{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
.cosmetics-control:active,.cosmetics-option:active{transform:scale(.97)}

.cosmetics-picker{position:absolute;inset:0;z-index:12;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;overflow:hidden;border-radius:inherit;background:linear-gradient(145deg,#f4f0e6,#f4f0e6);animation:cosmetics-enter .165s ease-out}
.cosmetics-picker-playmat{grid-template-rows:auto auto minmax(0,1fr) auto}
.cosmetics-picker-header{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px;min-height:51px;padding:5px 8px;border-bottom:1px solid #aa854538;background:#f4f0e6}
.cosmetics-picker-header h2{font-size:18px;font-weight:650;text-align:center;margin:0;color:var(--kit-quiet-ink,#706b63)}
.cosmetics-picker-back,.cosmetics-picker-close{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #aa854547;border-radius:50%;color:var(--kit-quiet-ink,#706b63);background:#f4f0e6cc;line-height:1;font-family:var(--font-ui)}
.cosmetics-picker-back{font-size:33px;padding-bottom:3px}.cosmetics-picker-close{font-size:25px}
.cosmetics-picker-preview{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;height:164px;min-height:0;padding:12px 20px;background:radial-gradient(ellipse at 40% 44%,#e6ddca28,transparent 72%);border-bottom:1px solid #aa85451c}
.cosmetics-preview-art{display:block;flex:none;height:140px;aspect-ratio:2/3;max-width:48%;border:1px solid #aa854569;border-radius:8px;overflow:hidden;box-shadow:0 6px 12px #17141036}
.cosmetics-preview-name{max-width:45%;font-size:15px;line-height:1.5;font-weight:550;color:var(--kit-ink,#292724);word-break:keep-all}
.cosmetics-picker-coin .cosmetics-preview-art{height:124px;aspect-ratio:1;border-radius:50%}
.cosmetics-picker-coin .cosmetics-preview-name{align-self:flex-start;margin-top:25px}
.cosmetics-coin-flip{position:absolute;bottom:28px;left:calc(50% + 8px);font-size:11px;padding:7px 12px;border:1px solid #aa854554;border-radius:6px;color:var(--kit-quiet-ink,#706b63);background:#f4f0e6}
.cosmetics-coin-flip[hidden]{display:none}
.cosmetics-picker-filters{display:flex;justify-content:center;gap:5px;padding:8px 12px;min-width:0;flex-wrap:wrap}
.cosmetics-filter{flex:1;max-width:100px;min-height:31px;border:1px solid transparent;border-radius:6px;padding:4px 6px;color:var(--kit-quiet-ink,#706b63);font-size:11px;background:#f4f0e640}
.cosmetics-filter[aria-pressed=true]{background:#e7d5ad78;color:var(--kit-ink,#292724);border-color:#aa854560}
.cosmetics-picker-scroll{overflow-x:hidden;overflow-y:auto;min-height:0;padding:4px 14px 18px;overscroll-behavior:contain;scrollbar-width:thin;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
.cosmetics-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 9px;align-items:start;touch-action:pan-y pinch-zoom}
.cosmetics-picker-cell{min-width:0}.cosmetics-option{display:block;width:100%;padding:5px;border:1px solid transparent;border-radius:8px;background:#f4f0e669;color:var(--kit-quiet-ink,#706b63);touch-action:pan-y pinch-zoom;text-align:center}
.cosmetics-option[aria-pressed=true]{border-color:#aa8545;background:#e7d5ad40;color:var(--kit-ink,#292724);box-shadow:inset 0 0 0 1px #b08a490d}
.cosmetics-option-art{display:block;width:100%;aspect-ratio:2/3;overflow:hidden;border:1px solid #aa854540;border-radius:6px;background:#f4f0e6}
.cosmetics-option-name{display:block;margin:6px 1px 2px;font-size:10px;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
.cosmetics-picker-playmat .cosmetics-option-art{aspect-ratio:3/2}.cosmetics-picker-playmat .cosmetics-option-art .cosmetic-image{object-fit:cover;object-position:50% 50%}
.cosmetics-picker-coin .cosmetics-option-art{aspect-ratio:1;border-radius:50%;border:0;background:none}
.cosmetics-picker-footer{padding:10px 16px max(12px,env(safe-area-inset-bottom,0px));background:linear-gradient(#f4f0e6,#f4f0e6);border-top:1px solid #aa85453d;box-shadow:0 -5px 15px #1714101b}
.cosmetics-picker-footer .primary-action{display:block;width:100%;min-height:44px;margin:0;font-size:14px}
@keyframes cosmetics-enter{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:350px){.cosmetics-control{gap:4px;padding-inline:3px;font-size:9px}.cosmetics-control-thumb{width:19px;height:25px}.cosmetics-control[data-cosmetic-kind=playmat] .cosmetics-control-thumb{width:23px;height:21px}.cosmetics-control[data-cosmetic-kind=coin] .cosmetics-control-thumb{width:25px}.cosmetics-picker-grid{gap:10px 6px}.cosmetics-picker-scroll{padding-inline:10px}}
@media(max-height:640px){.cosmetics-editor-controls{margin-bottom:4px}.cosmetics-control{min-height:30px}.cosmetics-control-thumb,.cosmetics-control[data-cosmetic-kind=coin] .cosmetics-control-thumb{height:22px}.has-cosmetics .editor-loadout{min-height:78px;padding-top:4px}.has-cosmetics .editor-loadout-slot{width:38px}.has-cosmetics .editor-loadout-slot.editor-leader{width:45px}.has-cosmetics>.deck-status{padding-bottom:4px}.has-cosmetics .editor-tabs{padding:1px}.has-cosmetics .editor-filters{min-height:29px;padding:2px 0 3px}.cosmetics-picker-preview{height:119px;padding:8px 16px}.cosmetics-preview-art{height:103px}.cosmetics-picker-coin .cosmetics-preview-art{height:98px}.cosmetics-preview-name{font-size:13px}.cosmetics-picker-coin .cosmetics-preview-name{margin-top:13px}.cosmetics-coin-flip{bottom:18px}.cosmetics-picker-filters{padding-block:6px}.cosmetics-picker-header{min-height:46px}.cosmetics-picker-header h2{font-size:16px}.cosmetics-picker-footer{padding-top:8px;padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){.cosmetics-picker{animation:none}.cosmetics-control:active,.cosmetics-option:active{transform:none}}
