#kits-button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:2px solid #879aa6;background:#14242e;padding:9px 12px;margin-top:12px;min-height:56px;color:#f4e8c9}
#kits-button svg{width:36px;height:40px;flex-shrink:0}#kits-button span{flex:1}#kits-button small{display:block;color:#9eb2bc;font-size:12px;margin-top:3px}
#kits{width:min(860px,calc(100vw - 24px));height:min(640px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);overflow:hidden;padding:0;background:#172630;border:2px solid #8ca1ad;color:#f4ead4;border-radius:0}
#kits .dialog-head{padding:14px 18px;border-bottom:2px solid #415560}#kits h2{font-size:25px;margin:0}
#kits[open]{display:flex;flex-direction:column}#kits .dialog-head,.kit-footer{flex-shrink:0}
.kits-layout{display:grid;grid-template-columns:220px 1fr;flex:1;min-height:0}.kit-list{padding:12px;display:grid;gap:8px;align-content:start;border-right:2px solid #415560;overflow-y:auto;min-height:0;overscroll-behavior:contain}.kit-preview-panel{overflow-y:auto;min-height:0}
.kit-list button{display:grid;grid-template-columns:44px 1fr;grid-template-rows:1fr 1fr;align-items:center;gap:2px 10px;padding:8px;border:2px solid #405562;background:#101d27;text-align:left;color:#eee8d9;min-height:64px;border-radius:0;position:relative}
.kit-list svg{grid-row:1/3;width:40px;height:45px}.kit-list strong{align-self:end;font-size:16px}.kit-list small{align-self:start;color:#a8b7c0;font-size:12px}.kit-list button[aria-pressed=true]{border-color:var(--kit-color);background:#2c3b44}.kit-list button.equipped::after{content:'✓';position:absolute;right:6px;top:3px;color:#b5ec82;font-size:16px}
.kit-preview-panel{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:20px;align-content:center}.kit-preview-panel canvas{width:100%;height:280px;align-self:center;background:linear-gradient(#1f3440,#11202a);border-bottom:3px solid var(--kit-color);image-rendering:pixelated}.kit-preview-panel h3{font-size:29px;margin:5px 0 12px;color:var(--kit-color)}.kit-preview-panel p{font-size:15px;line-height:1.5;margin:0 0 14px}.kit-preview-panel #kit-role{font-size:12px;color:#adbdc7}.kit-preview-panel #kit-details{font-size:13px;color:#b8c8d2}.kit-preview-panel label{display:flex;gap:10px;align-items:center;font-size:14px;margin:14px 0}.kit-preview-panel input{width:18px;height:18px;accent-color:#a5d78b}.kit-preview-panel button{width:100%;border:2px solid #f5d68a;background:#e6b747;color:#182330;padding:12px;font-size:18px;border-radius:0}
.kit-footer{padding:10px 18px;margin:0;border-top:1px solid #415560;color:#9cafbb;font-size:12px}
#kit-ability{--ability-size:78px;position:fixed;left:30px;bottom:180px;z-index:12;display:grid;place-items:center;width:var(--ability-size);height:var(--ability-size);padding:12px;border:2px solid #10202d;border-radius:50%;background:#142632ed;color:var(--kit-color,#bfd8e9);box-shadow:0 3px 0 #071019,inset 0 0 0 4px #3d5260;pointer-events:auto;touch-action:none;isolation:isolate}
#kit-ability[hidden]{display:none!important}#kit-ability>*{pointer-events:none}
#kit-ability .ability-icon{width:78%;height:78%;display:grid;place-items:center;background:none;border:0}.ability-icon svg{width:100%;height:100%;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #050e18)}
.ability-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:3}.ability-ring-track{stroke:#344956}.ability-ring-fill{stroke:var(--kit-color);stroke-dasharray:194.78;stroke-dashoffset:calc(194.78 * (1 - var(--ability-progress,0)));stroke-linecap:butt}
#kit-ability .ability-copy{position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);text-align:center;white-space:nowrap;display:flex;flex-direction:column;gap:3px;text-shadow:0 2px #06101a,1px 0 #06101a,-1px 0 #06101a}.ability-name{font-size:11px;line-height:1;color:#fff0d1}.ability-status{font-size:10px;color:#c4d3dd;line-height:1}
#kit-ability .ability-key{position:absolute;right:-3px;top:-3px;border:1px solid #829aa9;background:#243a48;min-width:22px;padding:3px;font:inherit;font-size:11px;line-height:1;color:#fff0d1;border-radius:4px;text-align:center;box-shadow:0 2px #071019}
.ability-charges{display:flex;justify-content:center;gap:3px;margin-top:1px}.ability-charges[hidden]{display:none}.ability-charges i{width:11px;height:3px;background:#3e5361;box-shadow:0 1px #0c1721}.ability-charges i.filled{background:var(--kit-color)}.ability-meter{display:none}
#kit-ability[data-state=ready]{box-shadow:0 3px #071019,inset 0 0 0 4px #3d5260,0 0 0 1px var(--kit-color);cursor:pointer}#kit-ability[data-state=ready] .ability-status{color:#c8efa9}#kit-ability[data-state=active]{background:#3a3d4c}#kit-ability[data-state=waiting] .ability-icon{opacity:.65}
#kit-ability:disabled{opacity:1;cursor:default}#kit-ability:focus-visible{outline:2px solid #fff4d3;outline-offset:4px}#kit-ability:not(:disabled):active{background:#405563}
.touch-controls #kit-ability{--ability-size:66px;left:50%;top:auto;bottom:calc(145px + env(safe-area-inset-bottom));transform:translateX(-50%)}.touch-controls #kit-ability .ability-name{font-size:10px}.touch-controls #kit-ability .ability-status{font-size:9px}.touch-controls #kit-ability .ability-key{font-size:9px}
@media(max-width:640px){body:not(.touch-controls) #kit-ability{bottom:230px}}
#kit-ability[data-ability-custom]{left:var(--ability-left)!important;top:var(--ability-top)!important;bottom:auto!important;right:auto!important;width:var(--ability-custom-size)!important;height:var(--ability-custom-size)!important;transform:none!important}
.ability-settings{padding:14px;border:1px solid #526f80;background:#142632;margin-bottom:18px}.ability-settings h3{margin:0 0 12px;font-size:18px}.ability-settings .sensitivity-row{margin-bottom:12px}.ability-settings button{padding:8px 12px;background:#304959;border:1px solid #95b2c0;color:#fff1d2;min-height:40px}.ability-settings .ability-settings-key{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.ability-settings p{font-size:12px;margin:8px 0;color:#bdd0dc}
@media(max-width:640px){.kits-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}.kit-list{display:flex;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:2px solid #415560}.kit-list button{min-width:124px;grid-template-columns:30px 1fr;gap:4px}.kit-list svg{width:28px}.kit-list strong{font-size:13px}.kit-preview-panel{grid-template-columns:110px 1fr;padding:14px;gap:12px}.kit-preview-panel canvas{height:240px}.kit-preview-panel h3{font-size:24px}.kit-preview-panel p{font-size:13px}.kit-preview-panel #kit-details{font-size:12px}}

body.layout-measuring #kit-ability{display:grid!important;min-width:0;visibility:visible!important}


.tile-kit{position:absolute;right:3px;top:3px;padding:2px 4px;background:#254944;color:#c6f8db;border:1px solid #79b7a4;font-size:9px}.ability-settings-preview{display:flex;justify-content:center;color:#91e0ef;padding:8px}.ability-settings-preview svg{background:#142632;border:2px solid #6daaba;border-radius:50%;padding:7px;box-sizing:content-box}
#layout-editor .layout-handle[data-control="kit-ability"] svg{fill:currentColor;stroke:none}

/* Rendered kit portraits */
.kit-bust{display:block;width:44px;height:50px;image-rendering:pixelated;background:radial-gradient(circle at 50% 40%,#2f4757,#101b24 70%);border:2px solid #0b1119;box-shadow:inset 0 0 0 1px #3a5262}
.kit-list .kit-bust{grid-row:1/3}.kit-list button[aria-pressed=true] .kit-bust{border-color:var(--kit-color)}
#kits-button .kit-bust{width:38px;height:43px;flex-shrink:0}
@media(max-width:640px){.kit-list .kit-bust{width:30px;height:34px}}

/* Segmented retro meter under the ability button */
#kit-ability .ability-meter{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:4px}
#kit-ability .ability-meter[hidden]{display:none}
.meter-label{font-size:10px;line-height:1;color:#fff0d1;font-weight:normal}
.meter-track{position:relative;display:block;width:104px;height:11px;background:#0e1a23;border:2px solid #0b1119;box-shadow:0 2px 0 #050b11,inset 0 0 0 1px #2d4150}
.meter-track i{position:absolute;left:1px;top:1px;bottom:1px;width:calc((100% - 2px) * var(--meter,0));background:linear-gradient(#fff6 0 2px,var(--kit-color) 2px calc(100% - 2px),#0005 calc(100% - 2px));transition:width .18s steps(4)}
.meter-track::after{content:'';position:absolute;inset:1px;background-image:linear-gradient(90deg,transparent calc(100% - 2px),#0b1119 calc(100% - 2px));background-size:calc(100% / var(--segments,10)) 100%;pointer-events:none}
.ability-meter[data-full] .meter-track{animation:meter-full .9s steps(2) infinite}
.ability-meter[data-full] .meter-label{color:var(--kit-color)}
@keyframes meter-full{50%{box-shadow:0 2px 0 #050b11,inset 0 0 0 1px #2d4150,0 0 0 2px var(--kit-color)}}
.touch-controls .meter-track{width:84px;height:9px}

/* Bounty Hunter wanted poster */
.bounty-pop{--bp-team:#ff7864;position:fixed;left:50%;top:max(96px,calc(env(safe-area-inset-top) + 88px));z-index:30;width:min(360px,calc(100vw - 32px));transform:translateX(-50%);background:#101c26;color:#f4ead4;border:3px solid #f4e3b8;box-shadow:0 0 0 3px #0b1119,6px 6px 0 3px #050b11a0;pointer-events:none;image-rendering:pixelated}
.bounty-pop[hidden]{display:none}
.bounty-pop::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(#0000 0 2px,#00000026 2px 3px);pointer-events:none}
.bp-banner{display:flex;justify-content:center;gap:10px;padding:5px 8px 4px;background:repeating-linear-gradient(-45deg,var(--bp-team) 0 8px,color-mix(in srgb,var(--bp-team) 78%,#000) 8px 16px);color:#0b1119;font-size:22px;line-height:1;text-shadow:0 1px 0 #fff8;border-bottom:3px solid #0b1119}
.bp-banner span{animation:bp-blink .5s steps(1) infinite}
.bp-body{display:flex;gap:12px;padding:12px}
.bp-photo{position:relative;flex-shrink:0;width:84px;height:95px;border:3px solid #0b1119;box-shadow:0 0 0 2px var(--bp-team)}
.bp-photo .kit-bust{width:100%;height:100%;border:0;box-shadow:none}
.bp-cross{position:absolute;inset:8px;background:linear-gradient(var(--bp-team),var(--bp-team)) top left/12px 3px,linear-gradient(var(--bp-team),var(--bp-team)) top left/3px 12px,linear-gradient(var(--bp-team),var(--bp-team)) top right/12px 3px,linear-gradient(var(--bp-team),var(--bp-team)) top right/3px 12px,linear-gradient(var(--bp-team),var(--bp-team)) bottom left/12px 3px,linear-gradient(var(--bp-team),var(--bp-team)) bottom left/3px 12px,linear-gradient(var(--bp-team),var(--bp-team)) bottom right/12px 3px,linear-gradient(var(--bp-team),var(--bp-team)) bottom right/3px 12px;background-repeat:no-repeat;animation:bp-lock .7s steps(3) both}
.bp-info{display:flex;flex-direction:column;min-width:0;gap:2px}
.bp-info small{font-size:13px;color:#9fb3bf;line-height:1}
.bp-name{font-size:30px;line-height:1;color:#fff4d6;text-shadow:2px 2px 0 #0b1119;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:1px 0 3px}
.bp-team{display:flex;align-items:center;gap:6px;font-size:17px;color:var(--bp-team);line-height:1;margin-bottom:6px}
.bp-team i{width:12px;height:12px;background:var(--bp-team);box-shadow:0 0 0 2px #0b1119}
.bp-reward{display:flex;align-items:center;gap:3px;font-size:20px;line-height:1;color:#fff0cd}
.bp-reward img{width:20px;height:20px;image-rendering:pixelated;margin-left:5px}.bp-reward img:first-child{margin-left:0}
.bp-claimed{justify-content:center;text-align:center}.bp-claimed .bp-info{align-items:center}.bp-claimed .bp-name{text-decoration:line-through 3px #e0503c}
.bounty-pop.bp-in{animation:bp-drop .42s steps(6) both}
.bounty-pop.bp-out{animation:bp-leave .34s steps(4) both}
.bounty-pop[data-kind=claimed].bp-in{animation:bp-drop .42s steps(6) both,bp-shake .3s steps(3) .42s}
@keyframes bp-drop{from{opacity:0;transform:translate(-50%,-40px) scale(.85)}70%{opacity:1;transform:translate(-50%,6px) scale(1.03)}to{transform:translate(-50%,0)}}
@keyframes bp-leave{to{opacity:0;transform:translate(-50%,-28px)}}
@keyframes bp-shake{33%{transform:translate(calc(-50% - 4px),0)}66%{transform:translate(calc(-50% + 4px),0)}}
@keyframes bp-blink{50%{opacity:.25}}
@keyframes bp-lock{from{inset:-6px;opacity:0}to{inset:8px;opacity:1}}
@media(prefers-reduced-motion:reduce){.bounty-pop.bp-in,.bounty-pop.bp-out,.bp-banner span,.bp-cross,.ability-meter[data-full] .meter-track{animation:none}}

/* Desktop: label + meter sit beside the ability button in a small panel so
   they never collide with Shift Lock or the hotbar. Flips near the right edge. */
body:not(.touch-controls) #kit-ability .ability-copy{left:calc(100% + 10px);top:50%;transform:translateY(-50%);align-items:flex-start;text-align:left;padding:6px 9px;background:#0d1822e6;border:2px solid #0b1119;box-shadow:0 0 0 1px #3d5260,0 3px 0 #050b11}
body:not(.touch-controls) #kit-ability[data-copy-side=left] .ability-copy{left:auto;right:calc(100% + 10px);align-items:flex-end;text-align:right}
body:not(.touch-controls) #kit-ability .ability-name{font-size:14px}body:not(.touch-controls) #kit-ability .ability-status{font-size:13px}
body:not(.touch-controls) #kit-ability .ability-meter{align-items:flex-start}body:not(.touch-controls) #kit-ability[data-copy-side=left] .ability-meter{align-items:flex-end}
body:not(.touch-controls) #kit-ability .meter-label{font-size:12px}body:not(.touch-controls) .meter-track{width:118px}

/* Kit sheet: framed sections matching the item shop */
.kit-preview-panel{align-content:stretch}
.kit-preview-panel>div{display:flex;flex-direction:column;min-height:0}
.kit-preview-panel #kit-description{margin-bottom:10px}
.kit-sections{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow-y:auto;padding-right:4px;overscroll-behavior:contain}
.kit-sec{background:#2a3157;border:2px solid #7b84b3;box-shadow:inset 0 -3px 0 #232a4d,0 2px 0 #0b1119}
.kit-sec h4{display:flex;justify-content:space-between;align-items:center;margin:0;padding:4px 8px;background:#4d5689;border-bottom:2px solid #7b84b3;font-size:15px;line-height:1.1;color:#fff4d6;text-shadow:1px 1px 0 #1c2449;font-weight:normal}
.kit-tag{font-size:12px;padding:1px 6px;background:#1c2449;border:1px solid #9aa4d6;color:var(--kit-color)}
.kit-sec-body{padding:8px}
.kit-sec-body p{margin:0;font-size:14px;line-height:1.3;color:#e6e9f7}
.kit-none{color:#8e97c4!important;letter-spacing:1px}
.kit-ability-row{display:flex;gap:10px;align-items:center}
.kit-ability-row strong{display:block;font-size:17px;color:var(--kit-color);margin-bottom:2px}
.kit-ability-icon{flex-shrink:0;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#142632;border:2px solid #0b1119;box-shadow:inset 0 0 0 3px #3d5260,0 0 0 1px var(--kit-color);color:var(--kit-color)}
.kit-ability-icon svg{width:36px;height:36px;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #050e18)}
.kit-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.kit-tile{cursor:default;min-height:88px}.kit-tile:hover{background:#434b78;border-color:#7b84b3}
#kits .tile-price .shop-currency-icon{width:18px;height:18px}
.kit-rules{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.kit-rules li{font-size:14px;color:#ffd1c4;display:flex;gap:6px}.kit-rules li::before{content:'✖';color:#ff7864}
.kit-full summary{cursor:pointer;font-size:13px;color:#9fb3bf;padding:2px 0}.kit-full p{font-size:13px;color:#b8c8d2;line-height:1.4;margin:4px 0 0}
.kit-preview-panel label{margin:10px 0 8px}
@media(max-width:640px){.kit-tiles{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}.kit-ability-icon{width:42px;height:42px}.kit-ability-icon svg{width:30px;height:30px}}
.kit-tile>img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(2px 3px 0 #1c254955)}.kit-tile .tile-name{font-size:13px}
#kits .kit-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;padding:8px 4px 6px}#kits .kit-tiles{grid-template-columns:repeat(auto-fill,minmax(96px,120px))}

/* Passive kits: a grayed-out, always-on badge rather than a pressable ability */
#kit-ability .ability-key[hidden]{display:none}
#kit-ability[data-state=passive]{background:#1a232b;box-shadow:0 3px 0 #071019,inset 0 0 0 4px #2b3740;cursor:help}
#kit-ability[data-state=passive] .ability-icon{filter:grayscale(.9) brightness(.85);opacity:.8}
#kit-ability[data-state=passive] .ability-ring-track{stroke:#4a5862;stroke-dasharray:4 5}
#kit-ability[data-state=passive] .ability-ring-fill{stroke:none}
#kit-ability[data-state=passive] .ability-name{color:#b9c4cc}
#kit-ability[data-state=passive] .ability-status{color:#8fa2ae}
#kit-ability[data-state=passive]:not(:disabled):active{background:#1a232b}
#kit-ability[data-state=waiting]{cursor:not-allowed}
/* Pop-up bubble when a passive or not-ready ability is pressed */
#kit-ability .ability-bubble{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;padding:5px 9px;background:#0d1822;border:2px solid #9fb3bf;box-shadow:0 3px 0 #050b11;color:#fff0d1;font-size:13px;line-height:1;opacity:0;pointer-events:none}
#kit-ability .ability-bubble::after{content:'';position:absolute;left:50%;top:100%;width:8px;height:8px;background:#0d1822;border-right:2px solid #9fb3bf;border-bottom:2px solid #9fb3bf;transform:translate(-50%,-4px) rotate(45deg)}
#kit-ability.ability-poke .ability-bubble{animation:ability-bubble 1.5s steps(8) both}
#kit-ability.ability-poke{animation:ability-wobble .3s steps(3)}
@keyframes ability-bubble{0%{opacity:0;transform:translate(-50%,6px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@keyframes ability-wobble{33%{rotate:-8deg}66%{rotate:8deg}}
#kit-ability[data-ability-custom].ability-poke{animation:none}

/* Searchable roster; the detail panel and equip control stay in view. */
.kit-catalog{display:flex;flex-direction:column;min-height:0;min-width:0;border-right:2px solid #415560;background:#12212b}
.kit-catalog .kit-list{flex:1;border:0;scrollbar-width:thin;scrollbar-color:#6d8492 #13212a}
.kit-filters{display:grid;gap:7px;padding:12px 12px 10px;border-bottom:1px solid #415560}
.kit-filters label{font-size:12px;color:#c5d7de;letter-spacing:1px}
.kit-filters input,.kit-filters select{box-sizing:border-box;width:100%;min-width:0;border:1px solid #6d8492;background:#0c1822;color:#f4ead4;font:inherit;font-size:15px;min-height:36px;padding:7px;border-radius:0}
.kit-filters input:focus-visible,.kit-filters select:focus-visible{outline:2px solid #e6b747;outline-offset:1px}
#kit-count{color:#9eb5c3;font-size:11px}#kit-empty{padding:12px;color:#c4d4dd;font-size:15px;line-height:1.5}
.kit-list button[hidden],#kit-empty[hidden],#shield-status[hidden]{display:none!important}
.kit-portrait{grid-row:1/3;display:flex;align-items:center;justify-content:center;min-width:0}.kit-portrait svg{height:50px;width:44px}
.kit-list button:focus-visible{outline:2px solid #f4e3b8;outline-offset:1px}
#shield-status{color:#a5e6ff;white-space:nowrap;margin-left:auto;margin-right:8px;font-size:11px}
@media(max-width:640px){
 .kit-catalog{border-right:0;border-bottom:2px solid #415560}
 .kit-filters{grid-template-columns:minmax(0,1fr) minmax(100px,.6fr);gap:6px;padding:8px 10px}
 .kit-filters label,#kit-count{display:none}
 .kit-catalog .kit-list{flex:none;min-height:76px;padding:8px;gap:6px}
 .kit-list button{flex:0 0 145px;min-height:58px}.kit-portrait svg{width:30px;height:34px}
 #kit-empty{margin:0;padding:8px 12px}
}
@media(max-width:440px){
 .kit-preview-panel{grid-template-columns:76px minmax(0,1fr);padding:10px;gap:10px}
 .kit-preview-panel canvas{height:190px}.kit-preview-panel h3{font-size:23px;margin-bottom:8px}
 .kit-preview-panel #kit-description{font-size:13px;line-height:1.35}.kit-ability-icon{display:none}
 #kits .dialog-head{padding:8px 12px}.kit-footer{font-size:10px;padding:8px 10px}
}

@media(min-width:641px) and (max-height:500px){
 #kits .dialog-head{padding:8px 12px}#kits .kit-footer{padding:7px 12px}
 .kit-preview-panel{grid-template-columns:115px minmax(0,1fr);grid-template-rows:minmax(0,1fr);padding:10px;gap:12px;overflow:hidden}
 .kit-preview-panel canvas{height:100%;max-height:220px;min-height:0}
 .kit-preview-panel h3{font-size:23px;margin:2px 0 4px}.kit-preview-panel #kit-description{font-size:13px;margin:0 0 6px;line-height:1.25}
 .kit-preview-panel button{padding:7px;min-height:36px}.kit-preview-panel label{margin:6px 0;font-size:12px}
 .kit-filters{padding:8px;gap:5px}.kit-filters label{display:none}.kit-list{padding:8px}
}