#action-bar{position:relative;display:grid;grid-template-columns:repeat(5,48px) 28px;grid-template-rows:repeat(2,44px);gap:4px;align-items:center}
#action-bar>.quick-slot{width:48px;height:44px}
#action-bar>.quick-slot:nth-of-type(-n+5){grid-row:1}
#action-bar>.quick-slot:nth-of-type(n+6){grid-row:2}
#action-bar>.quick-slot:nth-of-type(5n+1){grid-column:1}
#action-bar>.quick-slot:nth-of-type(5n+2){grid-column:2}
#action-bar>.quick-slot:nth-of-type(5n+3){grid-column:3}
#action-bar>.quick-slot:nth-of-type(5n+4){grid-column:4}
#action-bar>.quick-slot:nth-of-type(5n+5){grid-column:5}
#action-bar>#quick-edit{grid-column:6;grid-row:1/span 2}
#action-bar .quick-slot kbd{max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;left:4px;bottom:2px}
#basic-actions{position:absolute;right:0;bottom:calc(100% + 18px);display:flex;gap:6px;padding:4px;background:#071310c9;border:1px solid #af925b70;border-radius:3px}
/* Desktop uses key bindings; mobile moves these buttons into its controller. */
body #basic-actions{display:none}
#quick-edit{min-width:28px;width:28px;min-height:36px;padding:0;font-size:18px;color:#ead5a4}
.quick-art{position:absolute;inset:0;pointer-events:none}
.quick-count{position:absolute;right:5px;top:4px;padding:1px 3px;font:12px/1.2 system-ui;color:#fff0cd;background:#061017eb;border-radius:2px;pointer-events:none}
.quick-count:empty{display:none}
.quick-empty{position:absolute;inset:0;display:grid;place-items:center;color:#c4b48680;font:22px system-ui;pointer-events:none}
#action-bar .quick-slot.unavailable .quick-art{opacity:.4;filter:grayscale(.8)}
#modal[data-kind=quickslots]{width:min(820px,calc(100cqw - 24px));max-height:calc(100cqh - 20px)}
#modal[data-kind=quickslots] #modal-body{overflow:auto;min-height:0}
.quick-editor{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px 18px;padding:3px}
.quick-editor-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;grid-column:1;grid-row:1}
.quick-binding{grid-column:1;grid-row:2}
.quick-catalogs{grid-column:2;grid-row:1/span 3;display:flex;flex-direction:column;gap:14px}
.quick-catalogs .quick-catalog>div{flex-direction:column}
.quick-key-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.quick-key-row strong{font:12px system-ui;color:#e8d6af}
#modal[data-kind=quickslots] .quick-key-row button,.quick-key-row select{min-width:0;min-height:30px;font:12px system-ui;padding:5px 7px}
.quick-key-row select{min-width:70px;max-width:100px;background:#101916;color:#fff0ce;border:1px solid #917951}
.quick-key-conflict{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px;font:12px system-ui;color:#f3d29a}
.quick-key-conflict>span{flex-basis:100%}
#modal[data-kind=quickslots] .quick-key-conflict button{font-size:12px;min-width:0;min-height:28px;padding:5px 10px}
.quick-key-message{font:12px system-ui;color:#f0ce95;margin-top:6px}
#modal[data-kind=quickslots] .quick-choice{position:relative;min-width:0;height:96px;padding:0;border:1px solid #8e7857}
#modal[data-kind=quickslots] .quick-choice[aria-pressed=true]{outline:2px solid #e6c988;outline-offset:1px}
.quick-choice kbd{position:absolute;left:8px;top:6px;font:12px system-ui;color:#f6dfae}
.quick-choice .quick-icon{position:absolute;inset:12px auto auto 50%;transform:translateX(-50%);width:48px;height:48px}
.quick-choice>span:last-child{position:absolute;bottom:10px;left:0;right:0;font:12px system-ui;color:#f3e6c9}
.quick-choice .quick-empty{bottom:24px}
.quick-catalog h3{margin:0 0 8px;font:600 14px system-ui;color:#e3d3ad}
.quick-catalog>div{display:flex;gap:8px}
#modal[data-kind=quickslots] .quick-entry{position:relative;flex:1;min-width:0;min-height:68px;padding:10px 8px 10px 58px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:4px}
.quick-entry .quick-icon{position:absolute;inset:14px auto auto 10px;width:40px;height:40px}
.quick-icon>.action-icon,.quick-icon>.content-skill-art,.quick-icon>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transform:none;pointer-events:none}
.quick-resource{display:grid;place-items:center;width:100%;height:100%;font:700 12px system-ui;color:#ffb6a8}
.quick-resource.mp{color:#96caff}
.quick-entry strong,.quick-entry span{font:12px system-ui;color:#f1e7cf}
.quick-entry span{color:#b9cdbf}
.quick-editor-footer{display:flex;justify-content:flex-end;gap:6px;grid-column:1;grid-row:3}
#modal[data-kind=quickslots] .quick-editor-footer button{font-size:12px;min-width:0;min-height:34px}
.bag-detail-action:has(#register-quick){display:flex;flex-wrap:wrap;gap:6px}
.bag-detail-action #register-quick{flex:1}
@container game-viewport (max-height:520px) or (max-width:900px){
 #action-bar{grid-template-columns:repeat(5,42px) 26px;grid-template-rows:repeat(2,34px);gap:3px}
 #action-bar>.quick-slot{width:42px;height:34px}
 #action-bar>.quick-slot .action-icon{inset:3% 15%;width:70%;height:88%}
 #basic-actions{bottom:calc(100% + 18px);gap:3px;padding:3px}
 #quick-edit{width:26px;min-width:26px}
 .quick-editor{gap:7px 12px;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}.quick-editor-slots{gap:5px}
 #modal[data-kind=quickslots] .quick-choice{height:64px}.quick-choice .quick-icon{top:4px;width:32px;height:32px}.quick-choice>span:last-child{bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #modal[data-kind=quickslots] .quick-entry{min-height:54px;padding:7px 5px 7px 48px}.quick-entry .quick-icon{width:32px;height:32px;left:8px;top:10px}
 .quick-catalog h3{margin-bottom:5px;font-size:12px}
}
@container game-viewport (max-height:420px){
 .quick-editor{gap:6px}
 #modal[data-kind=quickslots] .quick-choice{height:56px}.quick-choice .quick-icon{top:3px;width:28px;height:28px}.quick-choice>span:last-child{bottom:4px}
 #modal[data-kind=quickslots] .quick-entry{min-height:42px;padding-top:4px;padding-bottom:4px}.quick-entry .quick-icon{top:6px}
 #modal[data-kind=quickslots] .quick-editor-footer button{min-height:28px;padding:5px 12px}
}
@container game-viewport (max-width:690px){
 #action-bar{grid-template-columns:repeat(5,36px) 24px;gap:2px}
 #action-bar>.quick-slot{width:36px;height:34px}
 #action-bar>#quick-edit{min-width:24px;width:24px}
 .quick-editor{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:7px}
 .quick-choice kbd{left:3px;top:3px}
}