.action-bar { position: relative; z-index: 5; max-width: 100%; pointer-events: auto; }
.action-frame { display: flex; padding: 9px; gap: 8px; align-items: center; }
.action-slots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.action-bar button { cursor: var(--cur-default), pointer; }
.action-slot { position: relative; width: 48px; height: 48px; padding: 3px; border: 1px solid #88652c; border-radius: 4px; background: #080909; color: #f7d276; }
.action-slot.learned { border-color: #d2a94d; background: radial-gradient(#49371a, #060707); }
.action-slot:hover, .action-slot:focus-visible { outline: 1px solid #ffdc76; box-shadow: 0 0 7px #dca932; }
.action-slot img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.action-slot kbd, .action-slot b, .action-passive { position: absolute; z-index: 1; font: bold 10px 'Segoe UI', sans-serif; line-height: 14px; min-width: 13px; background: #080807df; border-radius: 2px; }
.action-slot kbd { top: -3px; left: 1px; color: #ffedb0; }.action-slot b { bottom: 0; right: 1px; }.action-passive { top: 0; right: 0; color: #bfe29f; }
.action-empty { font: 23px Georgia, serif; color: #8c744b; }
.action-cooldown { position:absolute; inset:0; display:grid; place-items:center; background:#000b; color:#fff; font-weight:bold; z-index:2; }
.action-cooldown[hidden] { display:none; }.action-slot.no-mana img { filter:grayscale(1); opacity:.45; }
.action-feedback { display:block; min-height:14px; color:#ffe1a0; text-align:center; font-size:11px; text-shadow:0 1px 3px #000; }
.action-buffs { display:flex; justify-content:center; flex-wrap:wrap; gap:5px; max-width:480px; }
.action-buffs span { display:flex; align-items:center; gap:3px; color:#fff0c2; font-size:10px; background:#141008de; border:1px solid #806429; padding:2px; }
.action-buffs img { width:22px; height:22px; object-fit:contain; }
.action-tools { display: grid; gap: 3px; }.action-tools button { padding: 0; width: 29px; height: 24px; font-size: 18px; color: #f2cd72; background: #171209; border: 1px solid #826024; border-radius: 3px; }
.action-hint { display: block; font-size: 10px; line-height: 16px; color: #c6b28b; text-align: center; text-shadow: 0 1px 3px #000; }
.action-config { position: absolute; bottom: calc(100% + 7px); left: 0; right: 0; padding: 12px; border: 2px solid #c49b42; border-radius: 8px; background: #10100ff5; color: #e7d8b8; box-shadow: 0 4px 20px #000b; max-height: min(480px, 60dvh); overflow-y: auto; }
.action-config[hidden] { display: none; }
.action-config header, .action-config footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.action-config strong { color: #f2cd72; font: bold 18px Georgia, serif; }
.action-config p { font-size: 11px; margin: 8px 0; }.action-config button { padding: 5px 9px; color: #f2cd72; border: 1px solid #8c6a2a; background: #211b10; }
.action-config button:disabled { opacity: .5; }.action-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.action-choices label { font-size: 10px; display: grid; gap: 3px; margin: 0; }.action-choices select { width: 100%; min-width: 0; padding: 5px; font-size: 11px; margin: 0; }
@media (max-width: 620px) {
  .action-frame { padding: 7px; gap: 5px; }.action-slots { gap: 3px; }
  .action-slot { width: clamp(27px, 8vw, 42px); height: clamp(30px, 8vw, 42px); padding: 2px; }
  .action-tools button { width: 24px; height: 20px; font-size: 15px; }.action-hint { font-size: 9px; }
}