/* Pasek czarów: złocone ramki, ilustracje, skróty i przesłona czasu odnowienia. */
canvas.targeting-spell { cursor: crosshair; }
.hero-spells { display: flex; justify-content: center; gap: 20px; margin-top: 12px; }
.spell-btn { width: 108px; padding: 0; border: 0; background: none; color: #f3dfae; cursor: pointer; font: 700 12px Georgia, serif; }
.spell-art { position: relative; display: block; width: 68px; height: 68px; margin: 0 auto; border: 3px solid #b99a5a; border-radius: 6px; background: #090d13; box-shadow: 0 0 0 1px #090c0c, 0 3px 0 #060909, inset 0 0 0 1px #ffe4aa; }
.spell-art img { display: block; width: 100%; height: 100%; border-radius: 3px; }
.spell-art::after { content: ''; position: absolute; inset: 0; border-radius: 3px; box-shadow: inset 0 2px 2px #fff4bf66, inset 0 -3px 5px #000a; pointer-events: none; }
.spell-sweep { position: absolute; inset: 0; border-radius: 3px; background: conic-gradient(#020711cb var(--cooldown, 0deg), transparent 0); }
.spell-cooldown { position: absolute; inset: 0; display: grid; place-items: center; color: #fff6dd; font: bold 25px Georgia, serif; text-shadow: 0 2px 3px #000, 1px 0 #000; }
.spell-art kbd { position: absolute; bottom: -5px; right: -7px; padding: 1px 5px; border: 1px solid #b8995d; border-radius: 3px; background: #171b1c; color: #ffe7aa; font: bold 12px Georgia, serif; box-shadow: 0 2px 3px #000; }
.spell-name { display: block; margin-top: 9px; min-height: 17px; text-shadow: 0 2px #000; }
.spell-btn:hover:not(:disabled) .spell-art, .spell-btn:focus-visible .spell-art { border-color: #ffe6a6; box-shadow: 0 0 12px #edc77766, 0 0 0 1px #fff0bd; }
.spell-btn:focus-visible { outline: 1px solid #eac77f; outline-offset: 5px; }
.spell-btn:disabled { cursor: default; }
.spell-btn:disabled img { filter: saturate(.45); }
.spell-btn:disabled .spell-name { color: #aca692; }
.group-hero { margin-top: 10px; padding-top: 9px; border-top: 1px solid #80663d; }
.group-hero h3 { margin: 0; color: #f1d18c; font: bold 15px Georgia, serif; }
#sel { max-height: calc(100vh - 100px); overflow-y: auto; }
/* Sala bohaterów ma miejsce na pełne nazwy trzech klas. */
#sel.hero-hall-panel { width: 410px; max-width: calc(100vw - 20px); }
.hero-hall-panel .hero-actions .btn { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 420px) { .hero-hall-panel .hero-actions { flex-direction: column; } }