/* Cửa sổ kỹ năng: tab chọn nghề + thẻ nghề + kéo-thả thanh phím (js/ext_skill2.js); cửa sổ vừa màn (js/ext_win2.js) */
#win-skill .tabs .j2-tab { margin-left: auto; }
#win-skill .tabs .j2-tab.ready { color: #3a2a10; background: linear-gradient(#ffe07a, #ffc83a); border-color: #8a6a20; }
#win-skill .tabs .j2-tab.ready i { font-style: normal; color: #d83a2a; animation: j2-dot 1s infinite; }
#win-skill .tabs .j2-tab.on { background: var(--sky); color: var(--ink); }
@keyframes j2-dot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
#win-skill .st-main.j2-main { display: block; }
.j2-note { margin: 0 0 8px; padding: 4px 10px; border-radius: 8px; font-size: 12.5px; color: var(--ink, #2a2435); background: rgba(255, 213, 106, .35); }
.j2-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.j2-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 10px 12px; border-radius: 12px; background: var(--cream, #f7efdc); color: var(--ink, #2a2435); border: 3px solid var(--jc); box-shadow: 0 4px 0 rgba(0, 0, 0, .35); text-align: center; }
.j2-card.dim { filter: saturate(.6); opacity: .85; }
.j2-card .j2-hero { width: 104px; height: 104px; image-rendering: pixelated; background: radial-gradient(ellipse 45% 40% at 50% 75%, rgba(255, 207, 90, .45), transparent 70%); }
.j2-card b { font: 800 16px/1.2 var(--f-head); color: var(--jc); text-shadow: 1px 1px 0 rgba(0, 0, 0, .15); }
.j2-card p { margin: 0; font-size: 12px; line-height: 1.35; color: #4a4258; min-height: 32px; }
.j2-card .j2-sk { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.j2-card .j2-sk span { display: inline-flex; border-radius: 6px; background: rgba(0, 0, 0, .12); padding: 2px; }
.j2-card button { width: 100%; margin-top: 4px; }
.j2-card button.warn { background: linear-gradient(#ff9a6a, #e8603a); color: #fff; border-color: #7a2a10; animation: j2-dot .7s infinite; }
/* kéo-thả */
#win-skill .st-node[draggable="true"] { cursor: grab; }
#win-skill .st-slot[draggable="true"] { cursor: grab; }
body.sk-dragging #win-skill .st-slot, body.sk-dragging #slots .slot.skill { outline: 2px dashed rgba(255, 213, 106, .55); outline-offset: -2px; }
#win-skill .st-slot.over, #slots .slot.skill.over { outline: 3px solid #ffd56a; outline-offset: -3px; box-shadow: 0 0 12px rgba(255, 213, 106, .7); transform: scale(1.06); }
/* Menu: trang Điều khiển dạng phím cap (js/ext_menu2.js) */
.m2-h { margin: 4px 0 6px; font: 800 14px/1.2 var(--f-head); color: #8a5a10; }
.m2-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; margin-bottom: 10px; }
.m2-row { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 12px; }
.m2-k { display: inline-flex; gap: 3px; flex: none; min-width: 112px; }
.m2-cap { display: inline-block; min-width: 20px; padding: 1px 5px; border-radius: 5px; text-align: center; font: 700 11px/18px var(--f-head); color: var(--ink, #2a2435); background: #f7efdc; border: 2px solid #2a2435; box-shadow: 0 2px 0 #2a2435; }
.m2-t { color: var(--ink, #2a2435); }