@layer components{.a2-hotbar{min-width:0;margin:0;container:a2-hotbar/inline-size}.a2-hotbar__head{flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-bottom:10px;display:flex}.a2-hotbar__title{color:var(--a2-text);font:700 var(--a2-fs-sm) / 1.3 var(--a2-font-ui);letter-spacing:.04em;text-transform:uppercase}.a2-hotbar__caption{color:var(--a2-note);font-size:var(--a2-fs-xs);line-height:1.4}.a2-hotbar__grid{--hb-gap:6px;--hb-group-gap:18px;--hb-s:clamp(30px, calc((100cqi - 11 * var(--hb-gap) - var(--hb-group-gap)) / 12), 64px);--hb-ss:calc(var(--hb-s) * .74);justify-content:center;align-items:flex-end;gap:12px var(--hb-group-gap);display:flex}@container a2-hotbar (max-width:600px){.a2-hotbar__grid{--hb-gap:5px;--hb-s:min(52px, calc((100cqi - 7 * var(--hb-gap)) / 8));flex-wrap:wrap;justify-content:flex-start}}.a2-hotbar__group{flex-direction:column;gap:6px;min-width:0;display:flex}.a2-hotbar__glabel{color:var(--a2-menu-tint);font:700 11px / 1 var(--a2-font-ui);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:8px;display:flex}.a2-hotbar__glabel:after{content:"";background:linear-gradient(90deg, color-mix(in srgb, var(--a2-menu-tint) 45%, transparent), transparent);flex:1;height:1px}.a2-hotbar__group[data-g=stigma] .a2-hotbar__glabel{color:var(--a2-gold-text)}.a2-hotbar__group[data-g=stigma] .a2-hotbar__glabel:after{background:linear-gradient(90deg, color-mix(in srgb, var(--a2-gold) 55%, transparent), transparent)}.a2-hotbar__cols{grid-template-columns:repeat(var(--hb-n,8), var(--hb-s));align-items:end;gap:var(--hb-gap);margin:0;padding:0;list-style:none;display:grid}.a2-hotbar__col{flex-direction:column;align-items:center;gap:5px;min-width:0;display:flex}.a2-hotbar__stack{border-radius:var(--a2-radius);background:linear-gradient(#0000,#0000001f 30%,#00000059);flex-direction:column-reverse;align-items:center;gap:4px;width:100%;margin:0;padding:4px 0;list-style:none;display:flex;box-shadow:inset 0 0 0 1px #ffffff0d}.a2-hotbar__group[data-g=stigma] .a2-hotbar__stack{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--a2-gold) 16%, transparent)}.a2-hotbar__cell{--hb-cell:var(--hb-ss);width:100%;height:calc(var(--hb-cell) + 12px);place-items:start center;display:grid}.a2-hotbar__cell[data-row="0"]{--hb-cell:var(--hb-s)}.a2-hotbar__cell--empty:before{content:"";width:var(--hb-cell);height:var(--hb-cell);border-radius:2px;box-shadow:inset 0 0 0 1px #ffffff0f}.a2-hotbar__cell--empty[data-row="0"]:before{background:var(--a2-tex-slot-empty) center / 100% 100% no-repeat;box-shadow:none;opacity:.8}.a2-hotbar__tile{font:inherit;color:inherit;background:0 0;border:0;flex-direction:column;align-items:center;gap:3px;padding:0;text-decoration:none;display:inline-flex;position:relative}.a2-hotbar__art{display:inline-flex;position:relative}.a2-hotbar__tile .a2-slot{--a2-slot-size:var(--hb-cell,40px)}.a2-hotbar__tile:is(a,button):hover .a2-slot:after,.a2-hotbar__tile:is(a,button):focus-visible .a2-slot:after{opacity:1}.a2-hotbar__tile:is(a,button):hover .a2-slot{filter:brightness(1.1)}.a2-hotbar__tile:is(a,button){cursor:pointer}.a2-hotbar__tile:is(a,button):focus-visible{outline:2px solid var(--a2-focus);outline-offset:2px;border-radius:2px}.a2-hotbar__tile[data-dim] .a2-slot__icon{opacity:.4;filter:grayscale(.9)}.a2-hotbar .a2-hotbar__lv{min-width:16px;padding:0 3px;font-size:10px;line-height:14px;bottom:-3px;right:-3px}.a2-hotbar .a2-hotbar__tile--main .a2-hotbar__lv{font-size:11px;line-height:15px}.a2-hotbar .a2-hotbar__tile[data-dim] .a2-hotbar__lv{color:var(--a2-text-faint)}.a2-hotbar .a2-hotbar__pips{gap:3px;height:7px}.a2-hotbar .a2-hotbar__pips i{width:5px;height:5px}.a2-hotbar .a2-hotbar__tile--main .a2-hotbar__pips{gap:4px;height:9px}.a2-hotbar .a2-hotbar__tile--main .a2-hotbar__pips i{width:6px;height:6px}.a2-hotbar__key{place-items:center;min-height:20px;display:grid}.a2-hotbar__mouse{color:#ffffffb3;background:#141414;border-radius:3px;place-items:center;width:20px;height:20px;display:inline-grid;box-shadow:inset 0 0 0 1px #ffffff40}.a2-hotbar__mouse-lit{fill:var(--a2-gold-bright)}.a2-hotbar__col[data-fixed] .a2-hotbar__stack{background:linear-gradient(#0000,#00000014 30%,#ffffff12)}.a2-hotbar__spare{color:var(--a2-note);font-size:var(--a2-fs-xs);flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:12px;display:flex}.a2-hotbar__spare-list{--hb-cell:34px;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.a2-hotbar__foot{margin-top:10px}@media (prefers-reduced-motion:reduce){.a2-hotbar .a2-slot:after{transition:none}}}