.skills-toggle{position:absolute;left:18px;bottom:calc(env(safe-area-inset-bottom) + 25px);z-index:2;pointer-events:auto;background:linear-gradient(#797f95,#485267)}
.skills-toggle svg{stroke:#fff;stroke-width:2.3}
.skills-overlay{position:absolute;inset:0;z-index:11;display:flex;align-items:center;justify-content:center;padding:10px;background:rgba(7,12,25,.46);pointer-events:auto}
.skills-panel{position:relative;display:flex;flex-direction:column;width:100%;height:min(72%,650px);max-height:calc(100% - 20px);min-height:0;overflow:hidden;border:4px solid #101423;border-radius:18px;background:rgba(18,27,48,.94);box-shadow:0 6px 0 #101423,0 15px 35px #0b111b66,inset 0 3px #ffffff26;color:#fff}
.skills-heading{display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;padding:15px 12px 10px;color:#fff;text-shadow:0 3px #0a0e1b;font-weight:1000}.skills-heading h2{font-size:22px;line-height:1;margin:0;letter-spacing:.04em}.skills-heading-icon{font-size:20px;color:#b6c8ec}
.skills-tabs{display:flex;justify-content:center;gap:8px;flex-shrink:0;padding:0 12px 12px;border-bottom:2px solid #090e1b}
.skills-tab{display:grid;place-items:center;width:52px;height:48px;border:3px solid #0b101d;border-radius:10px;background:#42506a;color:#eef4ff;box-shadow:inset 0 2px #ffffff3b,0 2px #090e1b}
.skills-tab.active{background:linear-gradient(#9da9c6,#69799c);color:white;box-shadow:inset 0 2px #ffffff8a,0 2px #090e1b}
.skills-tab:disabled{opacity:.36;cursor:default;filter:grayscale(1)}
.skills-tab svg,.skill-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skills-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-start;gap:9px;padding:12px;overscroll-behavior:contain}
.skill-row{display:flex;align-items:center;gap:10px;min-height:74px;padding:6px;border:3px solid #090e1b;border-radius:10px;background:linear-gradient(120deg,#263550,#1b263d);box-shadow:inset 0 2px #ffffff17,0 2px #080c17}
.skill-icon{position:relative;flex:0 0 52px;height:54px;display:grid;place-items:center;align-content:start;padding-top:4px;background:#111b30;border:2px solid #090f1d;border-radius:7px;color:#d4d8e0}
.skill-icon small{position:absolute;bottom:1px;left:0;right:0;text-align:center;font-size:10px;font-weight:1000;line-height:1;color:#bfcbea}
.skill-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}.skill-copy strong{font-size:13px;line-height:1.1;font-weight:1000}.skill-copy span{font-size:11px;line-height:1.2;font-weight:800;color:#bdcbe1}
.skill-buy{display:flex;align-items:center;justify-content:center;gap:5px;flex:0 0 73px;height:44px;padding:4px;border:3px solid #101722;border-radius:8px;background:linear-gradient(#97d957,#4a9b32);box-shadow:inset 0 2px #d1fa95,0 3px #080f18;color:#fff;text-shadow:0 2px #2e5d25;font-size:16px;font-weight:1000}
.skill-buy:disabled{filter:grayscale(.8);opacity:.5;cursor:not-allowed}.skill-buy:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px #d1fa95,0 1px #080f18}.buy-coin{width:19px;height:19px;display:grid;place-items:center;border:2px solid #815114;border-radius:50%;background:#f4c13d;color:#ffe69b;font-size:12px;line-height:1;text-shadow:none}
.skill-buy.is-max .buy-coin{display:none}
.skills-footer{display:flex;justify-content:center;flex-shrink:0;padding:9px 12px 14px;border-top:2px solid #0b101d;background:#111828aa}
.skills-close{display:grid;place-items:center;width:61px;height:49px;border:3px solid #121019;border-radius:10px;background:linear-gradient(#fb7871,#c8444c);box-shadow:inset 0 2px #ffb9a6,0 3px #101018;color:#fff}.skills-close:active{transform:translateY(2px);box-shadow:inset 0 2px #ffb9a6,0 1px #101018}.skills-close svg{width:25px;height:25px;stroke:currentColor;stroke-width:3.2;stroke-linecap:round}
#app.skills-open #hud{z-index:12}#app.skills-open .touch-area,#app.skills-open .joystick,#app.skills-open .customize,#app.skills-open .tool-menu,#app.skills-open .skills-toggle{visibility:hidden}
@media(max-height:580px){.skills-panel{height:90%}.skills-heading{padding:7px}.skills-tabs{padding-bottom:6px}.skills-tab{height:40px}.skills-list{justify-content:flex-start;padding:7px;gap:6px}.skill-row{min-height:62px}.skill-icon{height:44px}.skills-footer{padding:5px}.skills-close{height:40px}}
