/* Scoped to the class carousel; no changes to the approved inventory panel. */
.tba-class-showcase{--tba-class-gold:#d5b56b;--tba-class-line:#685d42;display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;isolation:isolate;container-type:inline-size;background:#141711;color:#e5d9bb;font-family:"Noto Sans",system-ui,sans-serif;color-scheme:dark}
.tba-class-showcase,.tba-class-showcase *{box-sizing:border-box}
.tba-class-showcase .tba-class-overview{display:grid;grid-template-columns:minmax(52px,.8fr) minmax(0,1.5fr);align-items:center;gap:clamp(8px,2.5cqw,14px);flex:1;min-height:0;padding:clamp(9px,3cqw,16px);background:radial-gradient(ellipse at 8% 90%,#5e2d171f,transparent 70%);border-bottom:1px solid #645437}
.tba-class-showcase .tba-class-identity{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-self:stretch;gap:8px;min-width:0;min-height:0}
/* Fit the original 86:80 sprite inside its remaining grid cell. Size containment
   prevents portrait pixels from imposing an intrinsic minimum on short cards. */
.tba-class-showcase .tba-class-portrait{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0;container-type:size;overflow:hidden}
.tba-class-showcase .tba-class-portrait>.tba-source-portrait{display:block;width:min(100cqw,calc(100cqh * 86 / 80),118px);height:auto;aspect-ratio:86/80;max-width:none;flex:none}
.tba-class-showcase .tba-class-name{font-family:"Pixelify Sans",monospace;font-size:clamp(12px,3.5cqw,19px);font-weight:600;line-height:1.1;text-align:center;color:#f0d592;text-shadow:1px 1px #161009;overflow-wrap:anywhere}
.tba-class-showcase .tba-class-active-skills{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;max-height:100%;align-self:stretch;justify-content:center;gap:8px}
.tba-class-showcase .tba-class-active-skills h3{flex:none;margin:0;font-family:"Pixelify Sans",monospace;font-size:clamp(11px,3cqw,16px);font-weight:500;line-height:1.1;color:#ded0ab}
.tba-class-showcase .tba-class-skill-feedback{flex:none;min-width:0;margin:0;color:#d9c99b;font-size:clamp(8px,2.2cqw,10px);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tba-class-showcase .tba-class-skill-nodes{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;justify-items:center;gap:9px 5px;min-width:0;min-height:0;overflow:visible;padding:3px}
.tba-class-showcase .tba-class-skill{position:relative;display:block;z-index:1;width:clamp(26px,7.4cqw,36px);min-width:0;min-height:0;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:0;outline-offset:3px;background:#11170f;color:#f4e4be;font:inherit;line-height:1;cursor:pointer}
.tba-class-showcase .tba-class-skill img{display:block;position:absolute;max-width:none;max-height:none;object-fit:contain;image-rendering:pixelated;pointer-events:none;user-select:none}
.tba-class-showcase .tba-class-skill-frame{inset:0;width:100%;height:100%;z-index:1}
.tba-class-showcase .tba-class-skill-icon{inset:12%;width:76%;height:76%;z-index:0}
.tba-class-showcase .tba-class-skill-mark{position:absolute;z-index:2;right:-1px;bottom:-1px;min-width:9px;padding:1px 2px;background:#15190e;color:#f1d584;font:8px/1 "Noto Sans",system-ui,sans-serif;text-align:center;pointer-events:none}
.tba-class-showcase .tba-class-skill[data-queued=true]{outline:1px solid #d7b765;outline-offset:1px}
.tba-class-showcase .tba-class-skill-playing{position:absolute;z-index:2;left:12%;right:12%;bottom:12%;height:2px;transform-origin:left;background:#f4cd6b;pointer-events:none}
.tba-class-showcase .tba-class-skill[data-playing=true]{outline:1px solid #efd07d;outline-offset:1px}
.tba-class-showcase .tba-class-skill:focus-visible{outline:2px solid var(--tba-class-gold)}
.tba-class-showcase .tba-class-skill-description{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 7px);padding:8px 10px;border:1px solid #8b744a;background:#161a13f5;color:#f4e4be;box-shadow:0 5px 14px #000a;font:10px/1.4 "Noto Sans",system-ui,sans-serif;overflow-wrap:anywhere;pointer-events:none}
.tba-class-showcase .tba-class-skill-description strong{display:block;margin:0 0 3px;color:#f0d592}.tba-class-showcase .tba-class-skill-description p{margin:0}
.tba-class-showcase[data-class-active=false] *{animation-play-state:paused!important}
.tba-class-showcase .tba-class-skill-tooltip{display:none;position:absolute;z-index:3;bottom:calc(100% + 5px);left:50%;width:max-content;max-width:118px;transform:translateX(-50%);padding:5px 7px;border:1px solid #756446;background:#161a13;color:#f4e4be;font:10px/1.25 "Noto Sans",system-ui,sans-serif;text-align:center;white-space:normal;pointer-events:none;box-shadow:0 3px 8px #0008}
.tba-class-showcase .tba-class-skill:hover>.tba-class-skill-tooltip,.tba-class-showcase .tba-class-skill:focus>.tba-class-skill-tooltip{display:block}
.tba-class-showcase .tba-class-battle{position:relative;flex:0 0 128px;width:100%;height:128px;min-width:0;overflow:hidden;background:#130e0a}
.tba-class-showcase .tba-class-battle>*{width:100%;height:100%;min-width:0;min-height:0}
@container(max-width:300px){.tba-class-showcase .tba-class-overview{gap:8px;padding:9px;grid-template-columns:minmax(50px,.75fr) minmax(0,1.5fr)}.tba-class-showcase .tba-class-identity{gap:5px}.tba-class-showcase .tba-class-active-skills{gap:6px}.tba-class-showcase .tba-class-skill-nodes{gap:7px 4px}.tba-class-showcase .tba-class-skill{width:22px}.tba-class-showcase .tba-class-battle{flex-basis:92px;height:92px}}
/* Native HERO artwork is nine-sliced around the compact party configuration.
   Its title, bronze rows and inventory slots reuse the same source pixels. */
.tba-class-showcase.tba-party-config{padding:0;gap:0;container-type:size;background:#141711;color:#e1d6bf;font-family:"Noto Sans",system-ui,sans-serif;color-scheme:dark}
.tba-party-config .tba-party-native-panel{--tba-party-header:clamp(36px,13cqw,60px);position:relative;display:flex;flex:1;min-width:0;min-height:0;border-style:solid;border-color:transparent;border-width:var(--tba-party-header) 8px 8px;border-image-source:url("/taskbaragents/assets/taskbarhero/ui/9170-BG_hero.png");border-image-slice:78 10 16;border-image-repeat:stretch;background:#1b1e1a;image-rendering:pixelated;image-rendering:crisp-edges}
.tba-party-config .tba-party-native-heading{position:absolute;z-index:1;left:-8px;right:-8px;top:calc(-1 * var(--tba-party-header));height:var(--tba-party-header);pointer-events:none}
.tba-party-config .tba-party-native-heading>img{display:block;position:absolute;left:50%;height:auto;max-width:none;transform:translateX(-50%);image-rendering:pixelated;image-rendering:crisp-edges;user-select:none}
.tba-party-config .tba-party-native-dragon{top:0;width:44.65%;max-width:min(142px,calc(var(--tba-party-header) * 142 / 48))!important}
.tba-party-config .tba-party-native-title{bottom:16%;width:50.32%;max-width:200px!important}
.tba-party-config .tba-party-native-content{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(4px,1.8cqw,9px);width:100%;min-width:0;min-height:0;padding:clamp(6px,2.2cqw,11px);background-image:url("/taskbaragents/assets/taskbarhero/ui/7420-BG_Hero_Decor.png");background-size:100% 100%;background-repeat:no-repeat}
.tba-party-config .tba-party-native-label{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;margin:0;color:#e4c17b;font:500 clamp(12px,3.8cqw,19px)/1.15 "Pixelify Sans",monospace;text-shadow:1px 1px #100c07;text-align:center}
.tba-party-config .tba-party-native-label>img{flex:none;width:clamp(13px,4cqw,20px);height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
.tba-party-config .tba-party-files{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(4px,1.5cqw,8px);min-width:0;min-height:0}
.tba-party-config .tba-party-slot{display:grid;grid-template-columns:minmax(34px,28%) minmax(0,1fr);align-items:center;gap:clamp(7px,3cqw,15px);min-width:0;min-height:0;padding:3px clamp(6px,2cqw,10px);border:4px solid transparent;border-image:url("/taskbaragents/assets/taskbarhero/ui/7579-TabButton_Large_DeActive_Active.png") 6 fill stretch}
.tba-party-config .tba-party-slot[data-selected=true]{border-image-source:url("/taskbaragents/assets/taskbarhero/ui/9602-TabButton_Large_Active.png")}
.tba-party-config .tba-party-slot-portrait{position:relative;display:flex;align-items:center;justify-content:center;container-type:size;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
.tba-party-config .tba-party-slot-portrait>.tba-source-portrait{display:block;width:min(100cqw,calc(100cqh * 86 / 80),86px);height:auto;aspect-ratio:86/80;max-width:none;flex:none}
.tba-party-config .tba-party-slot-control{display:flex;flex-direction:column;justify-content:center;gap:clamp(2px,1cqw,5px);min-width:0;min-height:0}
.tba-party-config .tba-party-slot-label{display:flex;align-items:center;gap:4px;min-width:0;color:#e7c78a;font:500 clamp(9px,2.8cqw,13px)/1.1 "Pixelify Sans",monospace;text-shadow:1px 1px #161009}
.tba-party-config .tba-party-slot-label>img{width:clamp(10px,3cqw,13px);height:clamp(10px,3cqw,13px);flex:none;object-fit:contain}
.tba-party-config .tba-party-slot-control>select{display:block;width:100%;min-width:0;min-height:20px;margin:0;padding:2px 4px;border:1px solid #8b7044;border-radius:0;background:#211f17;color:#efdfb7;font:clamp(9px,2.8cqw,13px)/1.1 "Noto Sans",system-ui,sans-serif;box-shadow:inset 1px 1px #100e09,inset -1px -1px #403a29}
.tba-party-config .tba-party-slot-control>select:focus-visible{outline:2px solid #ffe293;outline-offset:2px}
.tba-party-config .tba-party-native-inventory{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));justify-items:center;gap:clamp(3px,1.2cqw,6px);min-width:0;padding-top:2px}
.tba-party-config .tba-party-native-inventory>span{position:relative;display:block;width:clamp(18px,7cqw,34px);aspect-ratio:1;background:#151811}
.tba-party-config .tba-party-native-inventory img{position:absolute;display:block;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none;user-select:none;object-fit:contain;max-width:none;max-height:none}
.tba-party-config .tba-party-item-frame{inset:0;width:100%;height:100%;z-index:1}
.tba-party-config .tba-party-item{inset:12%;width:76%;height:76%}
.tba-party-config.tba-party-config-embedded .tba-party-native-panel{border-width:6px;border-image-slice:6 10 16}
.tba-party-config.tba-party-config-embedded .tba-party-native-content{grid-template-rows:auto minmax(0,1fr)}
@container(max-width:300px){.tba-party-config .tba-party-slot{gap:7px;padding:2px 5px;border-width:3px}.tba-party-config .tba-party-native-content{padding:5px;gap:4px}.tba-party-config .tba-party-slot-control{gap:1px}.tba-party-config .tba-party-slot-control>select{padding:1px 2px;font-size:9px;min-height:19px}.tba-party-config .tba-party-slot-label{font-size:9px;line-height:1}.tba-party-config .tba-party-native-label{font-size:12px;line-height:1.1}}
@container(max-height:360px){.tba-party-config .tba-party-native-panel{--tba-party-header:30px;border-bottom-width:6px}.tba-party-config .tba-party-native-content{padding:5px;gap:4px}.tba-party-config .tba-party-native-label{font-size:12px;line-height:1.1}.tba-party-config .tba-party-native-label>img{width:13px;max-height:13px;object-fit:contain}.tba-party-config .tba-party-files{gap:4px}.tba-party-config .tba-party-slot{gap:7px;padding:1px 5px;border-width:2px}.tba-party-config .tba-party-slot-control{gap:1px}.tba-party-config .tba-party-slot-label{font-size:9px;line-height:1}.tba-party-config .tba-party-slot-label>img{width:10px;height:10px}.tba-party-config .tba-party-slot-control>select{font-size:9px;padding:1px 2px;min-height:19px}.tba-party-config .tba-party-native-inventory>span{width:18px}}