@import url('./card-identity.css');
/* Owned collection and destination planner. Scoped after legacy menu rules. */
#skillsPanel{--loadout-gap:18px;inset:max(var(--loadout-gap),env(safe-area-inset-top),var(--preview-safe-top,0px)) max(var(--loadout-gap),env(safe-area-inset-right),var(--preview-safe-right,0px)) max(var(--loadout-gap),env(safe-area-inset-bottom),var(--preview-safe-bottom,0px)) max(var(--loadout-gap),env(safe-area-inset-left),var(--preview-safe-left,0px));width:auto;height:auto;max-width:1440px;max-height:none;overflow:hidden;position:absolute;margin:auto;transform:none}
#skillsPanel .loadout-resources{padding:10px 24px;color:#d6c4a1;font-size:12px;border-bottom:1px solid #b68c4926}
#skillsPanel .loadout-workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(370px,1fr);gap:0;min-height:0;overflow:hidden;padding:0;container-type:normal}
#skillsPanel .loadout-inventory{grid-column:1;grid-row:1;display:flex;flex-direction:column;min-height:0;min-width:0;border:0;border-right:1px solid #b68c4940;padding:20px;gap:12px}
#skillsPanel .inventory-heading{display:flex;align-items:end;justify-content:space-between;margin:0;gap:12px}
#skillsPanel .inventory-heading .eyebrow,#skillsPanel .loadout-bar-heading .eyebrow{font-size:9px;display:block;color:#b49a72;margin-bottom:4px;letter-spacing:.17em}
#skillsPanel .inventory-heading h3{font:400 28px/1.05 Georgia,serif;color:#f4d9a5}
#skillsPanel #inventoryCount{font-size:11px;white-space:nowrap;color:#c2aa80}
#skillsPanel .ability-filters{display:flex;flex-wrap:nowrap;gap:5px;overflow:auto;flex:none;padding:0;background:none;position:static;margin:0}
#skillsPanel .ability-filters>button{flex:1;padding:8px 9px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;white-space:nowrap;border:1px solid #b68c4948;background:#18121b66}
#skillsPanel .ability-filters>button span{display:inline;font-size:10px;color:#c2ab82}
#skillsPanel .ability-filters>[aria-pressed=true]{background:#6b394d;border-color:#ddbd80;color:#f4dfb3;box-shadow:inset 0 -2px #ddbd80}
#skillsPanel .loadout-search{display:grid;grid-template-columns:1fr auto;gap:6px;flex:none}
#skillsPanel .loadout-search label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#skillsPanel .loadout-search input,#skillsPanel .loadout-facets select{width:100%;min-height:44px;color:#eddcbb;background:#17111bcc;border:1px solid #ad854948;border-radius:4px;padding:8px 10px;font:12px system-ui,sans-serif}
#skillsPanel .loadout-search input::placeholder{color:#b09d81;opacity:1}
#skillsPanel .loadout-search button{font-size:11px;padding:8px 12px;min-height:44px}
#skillsPanel .loadout-facets{display:flex;gap:7px;align-items:end;flex:none}
#skillsPanel .loadout-facets label{flex:1;min-width:0;font-size:10px;color:#bca783;display:flex;flex-direction:column;gap:5px}
#skillsPanel .loadout-facets select{font-size:11px;min-height:38px;padding:6px}
#skillsPanel .loadout-facets>button{min-height:38px;font-size:10px;padding:6px 9px;background:none;border-color:#aa834438}
#skillsPanel .loadout-owned-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:10px;overflow:auto;min-height:0;flex:1;scrollbar-width:thin;padding:3px 7px 4px 3px;scroll-padding:5px;scroll-snap-type:none}
#skillsPanel .loadout-collection-card{min-width:0;position:relative;border:1px solid #b99a5b66;background:linear-gradient(150deg,color-mix(in srgb,var(--card-wash) 35%,transparent),#211720 58%);border-radius:7px;overflow:hidden;box-shadow:0 3px 12px #08050c33}
#skillsPanel .loadout-collection-card[data-selected=true]{border-color:#ffe1a2;box-shadow:0 0 0 2px #e6c27a44,inset 0 0 0 1px #e6c27a88}
#skillsPanel .loadout-card-select{width:100%;display:flex;flex-direction:column;align-items:stretch;padding:10px;gap:9px;border:0;border-radius:0;background:none;box-shadow:none;text-align:left;min-height:0;color:#f2dfb9}
#skillsPanel .loadout-card-select[aria-pressed=true]{background:#a0703820}
#skillsPanel .loadout-card-topline{display:flex;justify-content:space-between;gap:4px;align-items:center;font:9px/1.2 system-ui,sans-serif;text-transform:uppercase;color:var(--card-accent);letter-spacing:.07em;min-height:22px}
#skillsPanel .loadout-card-topline b{font:10px system-ui,sans-serif;letter-spacing:0;border:1px solid #b5975b55;padding:3px;color:#e3cba0;flex:none}
#skillsPanel .loadout-card-art{height:78px;display:flex;align-items:center;justify-content:center;position:relative;border-block:1px solid #ac8b4b25;background:radial-gradient(ellipse at center,var(--card-wash),transparent 74%)}
#skillsPanel .loadout-card-art .skill-icon{display:block;width:58px;height:58px;padding:6px;border:1px solid var(--card-accent);border-radius:50%;background:#19141d88;color:var(--card-accent);filter:drop-shadow(0 5px 5px #0005);line-height:0}
#skillsPanel .loadout-card-art .skill-icon svg{width:100%;height:100%}
#skillsPanel .loadout-card-sigil{position:absolute;right:0;bottom:4px;font:7px system-ui,sans-serif;letter-spacing:.18em;color:var(--card-accent);opacity:.7}
#skillsPanel .loadout-card-select strong{font:400 21px/1.05 Georgia,serif;min-height:44px;color:#f6dfad;overflow-wrap:anywhere}
#skillsPanel .loadout-card-facts{display:grid;grid-template-columns:1fr 1fr;gap:5px;font:11px/1.3 system-ui,sans-serif}
#skillsPanel .loadout-card-facts>span{padding:6px 4px;background:#0e0b143a;border:1px solid #b58e4f24;min-width:0}
#skillsPanel .loadout-card-facts small{display:block;font-size:8px;color:#b49c78;margin:0 0 3px;text-transform:uppercase;letter-spacing:.05em}
#skillsPanel .loadout-card-binding{padding-top:3px;font:10px/1.3 system-ui,sans-serif;min-height:17px;color:#bda783}
#skillsPanel .loadout-card-binding[data-equipped=true]{color:#efcd8a}
#skillsPanel .loadout-card-tools{display:flex;border-top:1px solid #b68c492f;align-items:center;background:#0f0b1344}
#skillsPanel .loadout-card-tools>button{border:0;border-radius:0;box-shadow:none;flex:1;min-height:36px;padding:6px 9px;text-align:left;background:none;font-size:10px;color:#c7b48f}
#skillsPanel .loadout-card-tools .ability-drag-handle{position:static;display:grid;place-items:center;flex:none;width:44px;height:36px;min-height:36px;background:#51303b44;border-left:1px solid #aa824430;color:#d0b887;font:22px/1 system-ui,sans-serif;touch-action:none;cursor:grab}
#skillsPanel .loadout-pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
#skillsPanel .loadout-pagination button{font-size:11px;min-height:38px;padding:6px 14px}
#skillsPanel .loadout-pagination span{font-size:11px;color:#bca581}
#skillsPanel .loadout-empty{grid-column:1/-1;padding:24px;border:1px dashed #a5824b77;background:#1b131b55;text-align:center}
#skillsPanel .loadout-empty h4{font:24px Georgia,serif;color:#e9cea0;margin:0 0 12px}
#skillsPanel .loadout-empty p{font-size:12px;line-height:1.5;margin-bottom:15px}
#skillsPanel .loadout-placement{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0;overflow:auto;padding:20px;background:linear-gradient(130deg,#421f301c,#120d1733);container-type:normal;position:static}
#skillsPanel .loadout-bar-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;flex:none;margin:0;order:initial}
#skillsPanel .loadout-bar-heading h3{font:400 27px/1 Georgia,serif;color:#f4d9a5}
#skillsPanel .loadout-pages{display:flex;flex:1;min-width:210px;max-width:100%;width:auto;margin:0;padding:3px;gap:3px;order:initial}
#skillsPanel .loadout-pages>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;min-height:44px;font-size:11px;padding:5px 9px}
#skillsPanel .loadout-pages>button span{font-size:9px;opacity:.7}
#skillsPanel .loadout-slot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;flex:none;order:initial;width:100%;max-width:none}
#skillsPanel .loadout-slot-grid>.loadout-slot{height:88px;min-height:88px;min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:14px 4px 5px;overflow:hidden;touch-action:none;background:radial-gradient(ellipse at top,var(--card-wash,#3b2631),#211822 90%);border:1px solid #b28b515f}
#skillsPanel .loadout-slot .skill-icon{width:29px;height:29px;flex:none;color:var(--card-accent,#d3b37d);line-height:0}
#skillsPanel .loadout-slot .skill-icon svg{width:100%;height:100%}
#skillsPanel .loadout-slot-label{font:10px/1.1 system-ui,sans-serif;white-space:normal;max-height:24px;text-align:center;color:#e2cba5;overflow-wrap:normal}
#skillsPanel .loadout-slot-key{top:4px;left:6px;font:11px system-ui,sans-serif;color:#f0ce8a}
#skillsPanel .loadout-slot[data-empty=true]{background:#1b141b66;border-style:dashed}
#skillsPanel .loadout-slot[data-empty=true] .skill-icon{font:25px/29px Georgia,serif;color:#9b8058}
#skillsPanel .loadout-slot[data-current=true]{border-color:#f5d38e;box-shadow:inset 0 0 0 2px #f5d38e33}
#skillsPanel .loadout-slot.is-drop-target{border-color:#fff0bd;background:#7e4a43;box-shadow:0 0 0 2px #f0cd86;transform:translateY(-2px)}
#skillsPanel .loadout-selection-strip{display:flex;align-items:center;gap:9px;min-height:55px;flex:none;padding:9px;background:#703b4733;border:1px solid #b9985b4f}
#skillsPanel .loadout-selection-strip>.skill-icon{width:30px;height:30px;line-height:0;flex:none}
#skillsPanel .loadout-selection-strip>div{flex:1;min-width:0}
#skillsPanel .loadout-selection-strip strong{display:block;color:#ebd0a0;font:12px/1.3 system-ui,sans-serif}
#skillsPanel .loadout-selection-strip small{display:block;color:#bda37b;font:10px/1.35 system-ui,sans-serif;margin-top:2px}
#skillsPanel .loadout-selection-strip button{font-size:10px;padding:6px;min-height:36px}
#skillsPanel .loadout-instruction{order:initial;font-size:11px!important;line-height:1.5!important;min-height:33px;margin:0!important;flex:none;color:#d9c09a!important}
#skillsPanel .loadout-assignment-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex-direction:row;margin:0;order:initial;flex:none}
#skillsPanel .loadout-assignment-actions>button{font-size:10px;min-height:38px;padding:6px 8px}
#skillsPanel .loadout-status{min-height:33px;margin:0;font:11px/1.5 system-ui,sans-serif;color:#bcaa88;flex:none}
#skillsPanel .loadout-companion-section,#skillsPanel .loadout-help{font:11px/1.5 system-ui,sans-serif;flex:none;margin:0;border-top:1px solid #b68c4940;padding:9px 0 0}
#skillsPanel .loadout-companion-section>summary,#skillsPanel .loadout-help>summary{cursor:pointer;color:#d8bd89;min-height:38px;align-content:center}
#skillsPanel .loadout-companion-section .companion-card{margin:0;padding:12px;font-size:11px}
#skillsPanel .loadout-help p{font-size:11px;line-height:1.6;margin:8px 0}
#skillsPanel .loadout-inspector{position:absolute;inset:0;z-index:12;overflow:auto;padding:24px;background:radial-gradient(ellipse at 20% 15%,color-mix(in srgb,var(--card-wash) 45%,#281922),#211721 60%);border:1px solid #b8975b;scrollbar-width:thin}
#skillsPanel .loadout-inspector-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
#skillsPanel .loadout-inspector-head .eyebrow{font-size:10px;color:var(--card-accent)}
#skillsPanel .loadout-inspector-head button{font-size:12px}
#skillsPanel .loadout-selected-card{margin:0;display:flex;gap:22px;min-height:0;padding:22px;align-items:center;border:1px solid #ae8c5044}
#skillsPanel .loadout-selected-card>.skill-icon{width:96px;height:96px;flex:none;color:var(--card-accent);padding:14px;background:var(--card-wash);border-radius:50%;border:1px solid var(--card-accent)}
#skillsPanel .loadout-selected-card h3{font:400 36px/1.1 Georgia,serif}
#skillsPanel .loadout-selected-card p{font-size:13px;line-height:1.6}
#skillsPanel #selectedSkillDetails{font-size:12px}
#skillsPanel #loadoutInspectorFacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}
#skillsPanel #loadoutInspectorFacts>div{border:1px solid #b68c4940;background:#17121b55;padding:14px}
#skillsPanel #loadoutInspectorFacts dt{color:#c7ad84;font-size:12px}
#skillsPanel #loadoutInspectorFacts dd{margin:6px 0;font:24px Georgia,serif;color:#f1d6a6}
#skillsPanel #loadoutInspectorFacts small{font-size:10px;line-height:1.5;display:block;color:#b6a384}
#skillsPanel #loadoutInspectorNotes{font:12px/1.7 system-ui,sans-serif;color:#c9b698}
#skillsPanel #loadoutInspectorNotes p{margin:10px 0}
#skillsPanel .loadout-inspector-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #b68c4940;padding-top:20px;margin-top:20px}
#skillsPanel .loadout-inspector-footer p{font-size:11px}
#skillsPanel button:focus-visible,#skillsPanel input:focus-visible,#skillsPanel select:focus-visible,#skillsPanel summary:focus-visible{outline:2px solid #ffe4a1;outline-offset:2px}
@media(max-width:1150px){#skillsPanel .loadout-workspace{grid-template-columns:minmax(0,1fr) minmax(325px,.82fr)}#skillsPanel .loadout-owned-list{grid-template-columns:repeat(2,minmax(0,1fr))}#skillsPanel .loadout-inventory,#skillsPanel .loadout-placement{padding:15px}#skillsPanel .loadout-card-select strong{font-size:22px}}
/* Phone-sized workspaces preserve touch size, not desktop density. */
@media(max-width:700px) and (orientation:portrait){
 #skillsPanel{--loadout-gap:8px;border-radius:2px}
 #skillsPanel .panel-head{padding:4px 10px;min-height:52px}#skillsPanel .panel-head h2{font-size:27px}#skillsPanel .panel-head .eyebrow{display:none}#skillsPanel .menu-nav{padding:0 5px}#skillsPanel .menu-nav button{font-size:11px;padding:5px 4px;min-width:0;flex:1}
 #skillsPanel .loadout-resources{padding:7px 10px;font-size:11px}
 #skillsPanel .loadout-workspace{display:flex;flex-direction:column;gap:0;overflow:auto;padding:0;scroll-padding:240px}
 #skillsPanel .loadout-placement{position:sticky;top:0;z-index:3;display:flex;flex-direction:column;gap:8px;padding:10px;background:#2c1c27;box-shadow:0 5px 16px #10091488;border-bottom:1px solid #b694565f;overflow-y:auto;min-height:0;max-height:min(300px,40dvh);flex:none;order:0}
 #skillsPanel .loadout-bar-heading{flex-wrap:nowrap;gap:8px}#skillsPanel .loadout-bar-heading>div:first-child{display:none}#skillsPanel .loadout-pages{min-width:0;padding:1px;flex:1}#skillsPanel .loadout-pages>button{flex-direction:row;padding:5px;font-size:12px;gap:7px}
 #skillsPanel .loadout-slot-grid{grid-template-columns:repeat(5,minmax(44px,1fr));gap:4px}#skillsPanel .loadout-slot-grid>.loadout-slot{height:72px;min-height:72px;gap:3px;padding:12px 3px 4px;flex-direction:column}#skillsPanel .loadout-slot .skill-icon{width:24px;height:24px}#skillsPanel .loadout-slot-key{font-size:11px;top:2px;left:4px}#skillsPanel .loadout-slot-label{font-size:11px;line-height:1.1;max-height:25px;text-align:center}#skillsPanel .loadout-slot[data-empty=true] .skill-icon{font-size:22px;line-height:24px}
 #skillsPanel .loadout-selection-strip{min-height:54px;padding:5px;gap:7px}#skillsPanel .loadout-selection-strip>.skill-icon{width:26px;height:26px}#skillsPanel .loadout-selection-strip strong{font-size:12px}#skillsPanel .loadout-selection-strip small{font-size:11px}#skillsPanel .loadout-selection-strip button{padding:5px}
 #skillsPanel .loadout-instruction{font-size:12px!important;min-height:0}#skillsPanel .loadout-assignment-actions{gap:5px}#skillsPanel .loadout-assignment-actions>button{padding:6px;font-size:12px}
 #skillsPanel .loadout-status{min-height:0;font-size:11px;line-height:1.5}
 #skillsPanel .loadout-help,#skillsPanel .loadout-companion-section{display:block;padding-top:6px;font-size:12px}#skillsPanel .loadout-companion-section[open]{max-height:none;overflow:visible}
 #skillsPanel .loadout-inventory{order:1;flex:none;min-height:auto;padding:15px 10px;border:0;gap:10px}#skillsPanel .inventory-heading h3{font-size:24px}#skillsPanel .inventory-heading .eyebrow{font-size:10px}#skillsPanel .ability-filters{position:static;padding:0;margin:0}#skillsPanel .ability-filters>button{font-size:12px;padding:6px;gap:5px;flex-shrink:0}#skillsPanel .ability-filters>button span{font-size:11px}
 #skillsPanel .loadout-search input{font-size:16px}#skillsPanel .loadout-search button{font-size:12px}#skillsPanel .loadout-facets{flex-wrap:wrap;gap:6px}#skillsPanel .loadout-facets label{flex:1 1 105px;font-size:11px}#skillsPanel .loadout-facets select{font-size:12px}#skillsPanel .loadout-facets>button{font-size:12px}
 #skillsPanel .loadout-owned-list{overflow:visible;flex:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:3px}#skillsPanel .loadout-card-select{padding:9px;gap:7px}#skillsPanel .loadout-card-art{height:66px}#skillsPanel .loadout-card-art .skill-icon{width:51px;height:51px}#skillsPanel .loadout-card-select strong{font-size:23px;min-height:48px}#skillsPanel .loadout-card-facts{font-size:12px}#skillsPanel .loadout-card-tools>button,#skillsPanel .loadout-card-tools .ability-drag-handle{height:44px}
 #skillsPanel .loadout-footer{flex-wrap:wrap;padding:5px 8px;gap:5px}#skillsPanel .footer-secondary{gap:5px;flex-wrap:wrap}#skillsPanel .footer-secondary>button{font-size:12px;padding:6px}#skillsPanel .loadout-footer>.primary{min-width:125px;font-size:12px;padding:8px;flex:1}
 #skillsPanel .loadout-inspector{padding:15px}#skillsPanel .loadout-inspector-head{gap:8px;margin-bottom:15px}#skillsPanel .loadout-inspector-head .eyebrow{font-size:10px}#skillsPanel .loadout-inspector-head button{font-size:12px;padding:8px}#skillsPanel .loadout-selected-card{padding:14px;gap:13px;align-items:start}#skillsPanel .loadout-selected-card>.skill-icon{width:62px;height:62px;padding:9px}#skillsPanel .loadout-selected-card h3{font-size:27px}#skillsPanel .loadout-selected-card p{font-size:12px}#skillsPanel #selectedSkillDetails{font-size:11px}#skillsPanel #loadoutInspectorFacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#skillsPanel #loadoutInspectorFacts>div{padding:10px}#skillsPanel #loadoutInspectorFacts dt{font-size:12px}#skillsPanel #loadoutInspectorFacts dd{font-size:21px}#skillsPanel .loadout-inspector-footer{align-items:stretch;flex-direction:column;gap:10px}
 /* Expanding secondary management must never grow a pinned viewport wall. */
 #skillsPanel .loadout-placement:has(.loadout-companion-section[open]),#skillsPanel .loadout-placement:has(.loadout-help[open]){position:static;max-height:none;overflow:visible}
}
@media(max-width:700px) and (max-height:740px) and (orientation:portrait){
 /* Browse normally on a short screen. Selecting a card temporarily pins a
    bounded key area; no permanently expanded planner traps the collection. */
 #skillsPanel .loadout-placement{position:static;max-height:none;overflow:visible}
 #skillsPanel:has(#cancelBinding:not(:disabled)) .loadout-placement{position:sticky;max-height:min(235px,36dvh);overflow-y:auto}
 #skillsPanel .loadout-placement:has(.loadout-companion-section[open]),#skillsPanel .loadout-placement:has(.loadout-help[open]){position:static;max-height:none;overflow:visible}
 #skillsPanel:not(.game-management) .menu-nav{display:none}
}
@media(max-height:620px) and (orientation:landscape){
 #skillsPanel{--loadout-gap:4px}
 #skillsPanel .panel-head{padding:0 10px;min-height:44px}#skillsPanel .panel-head h2{font-size:25px}#skillsPanel .panel-head .eyebrow{display:none}#skillsPanel:not(.game-management) .menu-nav{display:none}
 #skillsPanel .loadout-resources{position:absolute;top:7px;left:115px;right:145px;padding:0;border:0;background:none;font-size:11px;line-height:1.35;max-height:34px;overflow:hidden}
 #skillsPanel .loadout-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(268px,.77fr);overflow:hidden;gap:0}
 #skillsPanel .loadout-inventory,#skillsPanel .loadout-placement{padding:8px;gap:8px;overflow:auto;min-height:0;max-height:none}
 #skillsPanel .inventory-heading{display:none}#skillsPanel .ability-filters>button{font-size:12px;padding:5px;flex-shrink:0}#skillsPanel .ability-filters>button span{display:inline;font-size:11px}#skillsPanel .loadout-search input,#skillsPanel .loadout-search button{font-size:12px}
 #skillsPanel .loadout-facets{flex-wrap:wrap;gap:6px;order:initial}#skillsPanel .loadout-facets label{flex:1 1 90px;min-width:0;font-size:11px;gap:4px}#skillsPanel .loadout-facets select{font-size:12px}#skillsPanel .loadout-facets>button{font-size:12px;padding:6px}
 #skillsPanel .loadout-owned-list{flex:none;overflow:visible;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;order:initial}
 #skillsPanel .loadout-card-select{padding:8px;gap:6px}#skillsPanel .loadout-card-art{height:56px}#skillsPanel .loadout-card-art .skill-icon{width:46px;height:46px;padding:5px}#skillsPanel .loadout-card-select strong{font-size:21px;min-height:44px}#skillsPanel .loadout-card-topline{font-size:11px;min-height:26px}#skillsPanel .loadout-card-facts{font-size:12px}#skillsPanel .loadout-card-tools>button,#skillsPanel .loadout-card-tools .ability-drag-handle{height:44px}
 #skillsPanel .loadout-pagination{order:initial}#skillsPanel .loadout-pagination button{font-size:12px}
 #skillsPanel .loadout-bar-heading>div:first-child{display:none}#skillsPanel .loadout-pages{width:100%;min-width:0;padding:0}#skillsPanel .loadout-pages>button{flex-direction:row;gap:5px;font-size:12px;padding:5px}#skillsPanel .loadout-pages>button span{font-size:11px}
 #skillsPanel .loadout-slot-grid{grid-template-columns:repeat(5,minmax(44px,1fr));gap:4px}#skillsPanel .loadout-slot-grid>.loadout-slot{height:64px;min-height:64px;padding:11px 2px 3px;gap:2px}#skillsPanel .loadout-slot .skill-icon{width:22px;height:22px}#skillsPanel .loadout-slot-label{font-size:11px;line-height:12px;max-height:24px}#skillsPanel .loadout-slot-key{font-size:11px;top:2px;left:4px}
 #skillsPanel .loadout-selection-strip{min-height:54px;padding:5px}#skillsPanel .loadout-selection-strip strong{font-size:12px}#skillsPanel .loadout-selection-strip small{font-size:11px}#skillsPanel .loadout-instruction{min-height:0;font-size:12px!important}#skillsPanel .loadout-assignment-actions>button{font-size:12px;padding:5px}#skillsPanel .loadout-status{font-size:11px;min-height:0}#skillsPanel .loadout-companion-section,#skillsPanel .loadout-help{font-size:12px;padding-top:6px}
 #skillsPanel .loadout-footer{padding:0 8px;min-height:44px;gap:6px;flex-wrap:nowrap}#skillsPanel .footer-secondary{gap:6px;flex-wrap:nowrap}#skillsPanel .footer-secondary>button,#skillsPanel .loadout-footer>.primary{padding:6px;font-size:12px}#skillsPanel .loadout-footer>.primary{min-width:125px}
}
/* These lower bounds also override the legacy menu's compact-media rules. */
#skillsPanel button,#skillsPanel input,#skillsPanel select,#skillsPanel summary,#skillsPanel .ability-drag-handle{min-height:44px!important}
#skillsPanel button,#skillsPanel input,#skillsPanel select{font-size:12px}
#skillsPanel .loadout-slot-label,#skillsPanel .loadout-slot-key,#skillsPanel .loadout-card-binding,#skillsPanel .loadout-card-facts small,#skillsPanel .loadout-card-topline,#skillsPanel .loadout-pages>button span{font-size:11px}
#skillsPanel .loadout-card-tools .ability-drag-handle{height:44px}
@media(prefers-reduced-motion:reduce){#skillsPanel .loadout-slot.is-drop-target{transform:none}}
/* Short-phone browse state: keep the actual keys and companion entry, without
   reserving space for tools whose target does not exist until selection. */
@media(max-width:700px) and (max-height:740px) and (orientation:portrait){
 #skillsPanel:not(:has(#cancelBinding:not(:disabled))) .loadout-selection-strip,
 #skillsPanel:not(:has(#cancelBinding:not(:disabled))) .loadout-assignment-actions,
 #skillsPanel:not(:has(#cancelBinding:not(:disabled))) .loadout-instruction,
 #skillsPanel:not(:has(#cancelBinding:not(:disabled))) .loadout-help{display:none}
 #skillsPanel:not(:has(#cancelBinding:not(:disabled))) .loadout-status{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:0;overflow:hidden;clip-path:inset(50%)}
}

/* Keep the same painted identity through collection and inspection. */
#skillsPanel .loadout-card-purpose{font:12px/1.4 system-ui,sans-serif;color:var(--card-accent);min-height:2.8em;overflow-wrap:anywhere}
#skillsPanel .loadout-selected-card>#selectedSkillIcon{width:116px;height:96px;padding:0;border-radius:3px;overflow:hidden;background:#241923}
#skillsPanel .loadout-selected-card>div{min-width:0}
#skillsPanel .loadout-card-facts>span{overflow-wrap:anywhere}
@media(max-width:700px) and (orientation:portrait),(max-height:500px) and (orientation:landscape){
 #skillsPanel .loadout-selected-card>#selectedSkillIcon{width:84px;height:78px}
 #skillsPanel .loadout-card-purpose{font-size:11px;min-height:2.8em}
}

/* Optional, read-only placement comparison lives in the existing Inspector.
   It never adds a row to the fixed Build planner or changes its scroll owners. */
#skillsPanel .loadout-compare{margin:18px 0;border:1px solid #b68c4955;padding:0 14px;background:#17121b55;font:12px/1.5 system-ui,sans-serif;min-width:0}
#skillsPanel .loadout-compare>summary{cursor:pointer;align-content:center;color:#f0d095;font-size:14px;min-height:44px}
#skillsPanel .loadout-compare label{display:block;margin:8px 0;color:#dcc6a1}
#skillsPanel .loadout-compare select{display:block;width:100%;max-width:100%;min-width:0;min-height:44px;padding:9px;color:#f1dab2;background:#211722;border:1px solid #b68c4977;font:12px system-ui,sans-serif}
#skillsPanel .loadout-compare p{font-size:12px;line-height:1.6;margin:12px 0;overflow-wrap:anywhere}
#skillsPanel .loadout-compare-summary{color:#f4d49e}
#skillsPanel .loadout-compare-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#skillsPanel .loadout-compare-cards>article{padding:12px;border:1px solid #b68c4944;min-width:0}
#skillsPanel .loadout-compare-cards strong{display:block;font:21px/1.2 Georgia,serif;color:#eed2a2;overflow-wrap:anywhere}
#skillsPanel .loadout-compare-cards span{display:block;font-size:11px;margin-top:6px;color:#bfae91}
#skillsPanel .loadout-compare h4{font:20px/1.2 Georgia,serif;color:#ecd0a1;margin-top:18px}
#skillsPanel .loadout-compare-metrics{margin:12px 0}
#skillsPanel .loadout-compare-metric{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 0;border-top:1px solid #b68c4940;min-width:0}
#skillsPanel .loadout-compare-metric dt,#skillsPanel .loadout-compare-metric dd.loadout-compare-difference{grid-column:1/-1;margin:0;color:#d6c19b}
#skillsPanel .loadout-compare-metric dd{margin:0;min-width:0;padding:8px;background:#08061033;overflow-wrap:anywhere}
#skillsPanel .loadout-compare-metric dd span,#skillsPanel .loadout-compare-metric dd b,#skillsPanel .loadout-compare-metric dd small{display:block;font-size:12px;line-height:1.5}
#skillsPanel .loadout-compare-metric dd b{font-size:15px;color:#f0d49e;margin:5px 0}
#skillsPanel .loadout-compare-metric dd small{color:#bfae91}
#skillsPanel .loadout-inspector-footer button{white-space:normal}
@media(max-width:480px){
 #skillsPanel .loadout-compare{padding:0 10px}
 #skillsPanel .loadout-compare-cards,#skillsPanel .loadout-compare-metric{grid-template-columns:minmax(0,1fr)}
}

#skillsPanel .loadout-compare-numbers>summary{cursor:pointer;align-content:center;min-height:44px;color:#eed2a2;font-size:13px}


/* Decision-first comparison; ordinary single-card inspection keeps its layout. */
#skillsPanel .loadout-inspector-source{margin:0;border:0;padding:0;background:none}
#skillsPanel .loadout-inspector[data-comparing=false] .loadout-inspector-source{display:contents}
#skillsPanel .loadout-inspector-source>summary{cursor:pointer;align-content:center;min-height:44px;font:14px/1.4 system-ui,sans-serif;color:#eed2a2}
#skillsPanel .loadout-inspector[data-comparing=true]{padding:12px}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-inspector-head{margin-bottom:8px;gap:8px}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-inspector-head .eyebrow{display:none}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-inspector-head button{margin-left:auto;min-height:44px}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-selected-card{padding:8px;gap:10px;align-items:center}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-selected-card>#selectedSkillIcon{width:48px;height:48px;padding:0}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-selected-card h3{font-size:26px;line-height:1.15}
#skillsPanel .loadout-inspector[data-comparing=true] #selectedSkillDescription{display:none}
#skillsPanel .loadout-inspector[data-comparing=true] #selectedSkillDetails{font-size:12px;line-height:1.4;margin:3px 0 0}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-compare{margin:10px 0 0;padding:0 10px}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-compare label{font-size:12px;line-height:1.4;margin:0 0 6px}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-compare p{font-size:14px;line-height:1.4;margin:8px 0}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-compare select{font-size:14px}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-compare-orders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-compare-orders>article{border:1px solid #b68c4944;padding:8px;min-width:0}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-compare-orders>article>div{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font:14px/1.4 system-ui,sans-serif}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-compare-orders strong{color:#f1d6a6;overflow-wrap:anywhere}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-compare-orders span{font-size:12px;white-space:nowrap;color:#cfbc9e}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-compare-orders p{margin:5px 0 0;font-size:14px;line-height:1.4}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-compare-orders .loadout-compare-cost{font-size:14px;color:#f1d6a6}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-compare .loadout-compare-scope{font-size:12px;color:#cfbc9e}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-compare-numbers>summary{font-size:14px}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-inspector-source{margin-top:4px;padding:0 10px}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-inspector-source>p{font:14px/1.5 system-ui,sans-serif;margin:8px 0}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-inspector-footer{margin-top:6px;padding-top:10px;gap:8px}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-inspector-footer p{font:12px/1.4 system-ui,sans-serif;margin:0}
#skillsPanel .loadout-inspector[data-comparing=true] .loadout-inspector-footer button{min-height:44px;font-size:14px}
@media(max-width:480px){
 #skillsPanel .loadout-inspector[data-comparing=true] .loadout-compare-orders{grid-template-columns:minmax(0,1fr)}
}