.outfit-shop{box-sizing:border-box;color:#f7f1df;background:radial-gradient(ellipse at top right,#34434a 0,transparent 55%),#111d2c;border:1px solid #53636d;border-radius:22px;padding:20px;width:min(980px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 24px 100px #0009}.outfit-shop::backdrop{background:#08111de8;backdrop-filter:blur(10px)}.outfit-shop[open]{display:flex;flex-direction:column}.outfit-shop [hidden]{display:none!important}.outfit-shop button{font:inherit;min-height:44px;border:1px solid #4f6574;border-radius:10px;background:#213447;color:inherit;padding:8px 12px;cursor:pointer}.outfit-shop header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.outfit-shop header>div{flex:1;min-width:0}.outfit-shop header small{font-size:9px;letter-spacing:2px;color:#abdfd4}.outfit-shop h2{font-size:32px;line-height:1.1;letter-spacing:-.8px;margin:5px 0 0}.outfit-free{font-size:10px;white-space:nowrap;background:#dfff70;color:#20312f;padding:7px 9px;border-radius:20px;font-weight:800}.outfit-shop [data-outfit-close]{width:44px;min-width:44px;font-size:24px;padding:0}.outfit-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px;min-height:0}.outfit-preview{position:relative;min-height:400px;border-radius:15px;overflow:hidden;background:#243342}.outfit-preview canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}.outfit-hero{position:absolute;left:14px;top:14px;z-index:2;pointer-events:none;display:flex;flex-direction:column;gap:5px}.outfit-hero span{font-size:12px;font-weight:700;background:#142332d9;padding:5px 9px;border-radius:20px;width:max-content;max-width:100%}.outfit-hero small{font-size:9px;background:#142332c9;padding:4px 7px;border-radius:6px;color:#d6e9e1}.outfit-catalog{min-height:0;overflow-y:auto;max-height:min(540px,calc(100dvh - 200px));padding-right:3px}.outfit-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;position:sticky;top:0;z-index:2;background:#182532;padding-bottom:12px}.outfit-tabs button{font-size:11px;padding:5px;min-width:0}.outfit-tabs [aria-pressed=true]{color:#1d3431;background:#b0ede0;border-color:#b0ede0;font-weight:750}.outfit-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.outfit-shop .outfit-items button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:160px;padding:11px 8px;background:radial-gradient(ellipse at top,color-mix(in srgb,var(--item-color) 24%,transparent),transparent 75%),#1b2b3c;text-align:center;gap:5px;transition:border-color .16s,background-color .16s}.outfit-items svg{width:86px;height:86px;filter:drop-shadow(0 6px 4px #0004);transition:transform .18s}.outfit-items strong{font-size:12px;line-height:1.3;font-weight:650}.outfit-items small{font-size:10px;color:#b4d2cb}.outfit-items .outfit-check{position:absolute;right:8px;top:8px;border-radius:50%;width:20px;height:20px;background:#dfff70;color:#19312d;display:none;font-size:13px;line-height:20px}.outfit-items [aria-pressed=true]{border-color:#dfff70!important;box-shadow:inset 0 0 0 1px #dfff7050}.outfit-items [aria-pressed=true] .outfit-check{display:block}.outfit-items [aria-pressed=true] svg{transform:translateY(-2px) rotate(-3deg)}.outfit-fit{font-size:11px;color:#adbec7;line-height:1.5;margin:12px 0 0}.outfit-shop [data-outfit-clear]{width:100%;margin-top:10px;font-size:12px}.outfit-shop footer{display:flex;align-items:center;gap:12px;margin-top:16px}.outfit-shop footer p{flex:1;font-size:11px;line-height:1.4;color:#becfd0;margin:0}.outfit-shop footer .primary{font-size:13px;min-height:48px;font-weight:800;color:#1c302c;background:#dfff70;border-color:#dfff70;white-space:nowrap}.outfit-shop [data-outfit-dance]{font-size:11px;white-space:nowrap}.outfit-shop :focus-visible{outline:2px solid #dfff70;outline-offset:2px}.outfit-entry{min-height:44px!important}.roster-card .roster-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.roster-actions button{grid-column:auto;font-size:11px;min-width:0;padding:5px;text-align:center}.roster-card .outfit-swatches{display:flex;gap:4px;align-items:center;font-size:10px}.outfit-swatches i{width:9px;height:9px;border-radius:3px;border:1px solid #ffffff70}.outfit-shop .view-hint{display:none}
@media(max-width:600px) and (orientation:portrait){.outfit-shop{padding:12px;max-height:calc(100dvh - 16px);width:calc(100vw - 16px)}.outfit-shop header{gap:7px;margin-bottom:10px}.outfit-shop h2{font-size:23px}.outfit-free{font-size:9px;padding:6px 7px}.outfit-layout{display:flex;flex-direction:column;gap:10px}.outfit-preview{min-height:190px;height:28dvh;flex:none}.outfit-hero small{display:none}.outfit-catalog{max-height:calc(100dvh - max(190px,28dvh) - 236px)}.outfit-items{gap:7px}.outfit-shop .outfit-items button{min-height:137px}.outfit-items svg{width:70px;height:70px}.outfit-shop footer{flex-wrap:wrap;gap:8px;margin-top:10px}.outfit-shop footer p{font-size:10px}.outfit-shop footer .primary{flex-basis:100%;width:100%}.outfit-tabs{padding-bottom:8px}.roster-card .roster-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.outfit-shop .outfit-preview .view-toolbar{right:8px;bottom:8px}}
@media(max-height:460px) and (orientation:landscape){.outfit-shop{padding:10px 14px;max-height:calc(100dvh - 16px)}.outfit-shop header{margin-bottom:8px}.outfit-shop h2{font-size:23px}.outfit-layout{height:calc(100dvh - 148px);grid-template-columns:1fr 1.1fr;gap:12px}.outfit-preview{min-height:0}.outfit-catalog{max-height:100%}.outfit-shop .outfit-items button{min-height:132px}.outfit-items svg{width:65px;height:65px}.outfit-shop footer{margin-top:8px;gap:8px}.outfit-shop footer p{font-size:9px}.outfit-shop footer .primary{font-size:11px;padding:7px}.outfit-tabs button{font-size:10px}.outfit-hero small{display:none}}
@media(prefers-reduced-motion:reduce){.outfit-items svg,.outfit-shop .outfit-items button{transition:none}}
