/* The action strip is the wooden counter; its brass edge separates decisions from the pot. */
#actions {
  background: repeating-linear-gradient(0deg, transparent 0 16px, #1c100d38 17px 18px),
              linear-gradient(180deg, #4b3023, #2d1c17);
  border-top: 2px solid #b58c4c;
  box-shadow: inset 0 1px #ebcc8866, 0 -4px 12px #160c0855;
}

#actions .draw::before,
#actions button[data-action^='{"type":"flask"']::before,
#actions button[data-action^='{"type":"ruby_flask"']::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  margin: -5px 6px -5px 0;
  vertical-align: middle;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: url('/assets/ui/ingredient-bag.svg') center / contain no-repeat;
  transform-origin: 50% 75%;
  transition: transform .15s ease;
}

#actions button[data-action^='{"type":"flask"']::before,
#actions button[data-action^='{"type":"ruby_flask"']::before {
  background-image: url('/assets/ui/potion-flask.svg');
}

#actions .draw:hover:enabled::before,
#actions button[data-action^='{"type":"flask"']:hover:enabled::before,
#actions button[data-action^='{"type":"ruby_flask"']:hover:enabled::before { transform: rotate(-9deg) translateY(-2px); }
#actions .draw:active:enabled::before,
#actions button[data-action^='{"type":"flask"']:active:enabled::before,
#actions button[data-action^='{"type":"ruby_flask"']:active:enabled::before { transform: translateY(2px) scale(.94); }

.calm #actions button::before { transform: none!important; transition: none; }

@media (prefers-reduced-motion: reduce) {
  #actions .draw::before,
  #actions button[data-action^='{"type":"flask"']::before,
  #actions button[data-action^='{"type":"ruby_flask"']::before { transition: none; }
  #actions .draw:hover:enabled::before,
  #actions button[data-action^='{"type":"flask"']:hover:enabled::before,
  #actions button[data-action^='{"type":"ruby_flask"']:hover:enabled::before { transform: none; }
}

@media(max-width:720px){
  #actions>button{min-height:58px;display:inline-flex;align-items:center;justify-content:center;gap:4px}
  #actions>button::before{flex:0 0 28px;width:28px;margin:0}
}