/* The Armory's iron plaques, crimson cloth and brass edging carried into combat. */
.prepared-spells {
  position:absolute; left:50%; bottom:138px; transform:translateX(-50%);
  width:302px; max-width:calc(100% - 28px); padding:9px 10px 8px;
  color:var(--heraldry-cream); font:600 11px/1.2 var(--font-script); text-align:center; pointer-events:none;
  border:1px solid #c99c525c; border-top:2px solid var(--heraldry-crimson);
  background:linear-gradient(180deg, #321e1ded, #221d19e6); box-shadow:0 5px 16px #0005;
  animation:prepared-enter .16s ease-out;
}
.prepared-spells::after { content:""; position:absolute; bottom:-1px; left:0; height:2px; width:var(--chivalry-left); background:var(--heraldry-brass); transition:width .08s linear; }
.prepared-spells[hidden], .touch-prepared-fan[hidden] { display:none; }
.prepared-spells>small { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:var(--heraldry-brass-light); }
.prepared-spells>small>span { font:400 16px/1 var(--font-inscription); letter-spacing:.04em; }
.prepared-spells>small>b { font:700 11px/1 var(--font-script); font-variant-numeric:tabular-nums; color:var(--heraldry-cream); }
.prepared-spell-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; align-items:stretch; }
.prepared-spell, .touch-prepared-slot {
  --spell-color:#ffa35a; color:var(--heraldry-cream); border:1px solid #c99c5266; border-radius:2px;
  background:linear-gradient(180deg, #3a322bf5, #221d19f5);
  transition:border-color .12s ease, background .12s ease, transform .12s ease, box-shadow .12s ease;
}
.prepared-spell[data-spell="coreflagration"], .touch-prepared-slot[data-spell="coreflagration"] { --spell-color:#ff9852; }
.prepared-spell[data-spell="frostfire"], .touch-prepared-slot[data-spell="frostfire"] { --spell-color:#8fdcff; }
.prepared-spell[data-spell="gale"], .touch-prepared-slot[data-spell="gale"] { --spell-color:#e6eee3; }
.prepared-spell[data-spell="steel"], .touch-prepared-slot[data-spell="steel"] { --spell-color:#d8e1ea; }
.prepared-spell { display:grid; grid-template-columns:20px minmax(0,1fr); gap:3px 4px; align-items:center; padding:7px 5px 5px; }
.prepared-spell svg { width:20px; height:20px; grid-row:span 2; color:var(--spell-color); }
.prepared-spell span { white-space:nowrap; font:400 12px/1 var(--font-inscription); }
.prepared-spell b { font-size:10px; color:#c8d6ad; font-variant-numeric:tabular-nums; }
.prepared-spell i { grid-column:1/-1; min-height:8px; font:800 7px/1 var(--font-script); letter-spacing:.12em; font-style:normal; color:var(--heraldry-brass-light); }
.prepared-spell.current { border-color:var(--heraldry-brass-light); box-shadow:inset 3px 0 var(--heraldry-crimson), inset 0 0 14px #ecc97f12; }
.prepared-spell.cooling b, .touch-prepared-slot.cooling b { color:#c3b39b; }
.prepared-spell.highlighted, .touch-prepared-slot.highlighted { border-color:var(--heraldry-cream); transform:translateY(-2px); background:linear-gradient(180deg,#63352a,#34221c); box-shadow:0 0 0 1px #ecc97f44, inset 0 0 14px #ecc97f20; }
.prepared-spells>em { display:block; font:700 9px/1.2 var(--font-script); font-style:normal; letter-spacing:.04em; margin-top:7px; color:#d0b98f; }
.prepared-spells.cancelled>em { color:#efb29d; }
.touch-prepared-fan { position:absolute; width:0; height:0; pointer-events:none; z-index:8; }
.touch-prepared-slot { position:absolute; display:grid; justify-items:center; align-content:center; gap:3px; width:62px; min-height:60px; transform:translate(-50%,-50%); font:400 12px/1 var(--font-inscription); box-shadow:0 4px 12px #0006; }
.touch-prepared-slot svg { width:23px; height:23px; color:var(--spell-color); }
.touch-prepared-slot b { color:#c8d6ad; font:700 9px/1 var(--font-script); }
.touch-prepared-slot.highlighted { transform:translate(-50%,calc(-50% - 2px)); }
.chivalry-prepared .touch-spell { border-radius:2px; border-color:var(--heraldry-brass); background:linear-gradient(180deg,#493127e6,#221d19e6); }
.chivalry-prepared .touch-spell.prepared-highlighted { border-color:var(--heraldry-cream); box-shadow:inset 0 0 14px #ecc97f33; }
@keyframes prepared-enter { from { opacity:0; transform:translate(-50%,5px); } to { opacity:1; transform:translate(-50%,0); } }
@media (pointer:coarse) { .prepared-spells { bottom:90px; width:254px; padding:7px 8px; } .prepared-spells>em { display:none; } .prepared-spell { grid-template-columns:16px minmax(0,1fr); gap:3px; padding:6px 3px 4px; } .prepared-spell svg { width:16px; height:16px; } }
@media (max-height:450px) { .prepared-spells { bottom:104px; } }
@media (prefers-reduced-motion:reduce) { .prepared-spells { animation:none; } .prepared-spell, .touch-prepared-slot, .prepared-spells::after { transition:none; } }
.prepared-spell svg, .touch-prepared-slot svg { fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }

.prepared-spell kbd { grid-column:1/-1; justify-self:center; min-width:17px; padding:2px 3px; border:1px solid #c99c5280; border-radius:2px; color:var(--heraldry-brass-light); font:800 10px/1 var(--font-script); background:#171511b3; }
.prepared-spells[data-input="touch"] kbd { display:none; }
.prepared-spells[data-input="keyboard"].selecting>small>span { font:700 12px/1 var(--font-script); letter-spacing:.04em; }

/* With a mouse and keyboard: a rack of three tiles standing on the Q, E and R tiles, cut from the same cloth as them
   (their dark plate, thin rule, key badge and cooldown shade), the equipped spell edged in the ultimate's gold. The R
   tile beside it counts Chivalry down, so the rack carries no timer of its own. */
.abilities { position: relative; }
.prepared-spells.docked {
  left: 0; right: 0; bottom: calc(100% + 9px); transform: none; width: auto; max-width: none;
  display: flex; flex-direction: column; padding: 0; border: 0; background: none; box-shadow: none; text-align: left;
  animation: prepared-rise .16s ease-out;
}
.prepared-spells.docked::after { display: none; }
.prepared-spells.docked > small { margin: 0 0 5px; font: 800 8px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #c9ae78; }
.prepared-spells.docked > small > span, .prepared-spells.docked.selecting > small > span { font: inherit; letter-spacing: inherit; }
.prepared-spells.docked > em { order: -1; margin: 0 0 6px; font: 800 8px/1.25 system-ui, sans-serif; letter-spacing: .1em; color: #d0b98f; }
.prepared-spells.docked.quiet > em { display: none; }
.prepared-spells.docked .prepared-spell-row { gap: 9px; }
.prepared-spells.docked .prepared-spell {
  position: relative; height: 46px; padding: 6px 7px 5px; overflow: hidden; border: 1px solid #585648; border-radius: 0;
  background: rgba(21, 22, 18, .86); grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: 18px 12px; gap: 1px 5px;
}
.prepared-spells.docked .prepared-spell::after { content: ""; position: absolute; inset: 0; background: rgba(10, 11, 8, .62); transform: translateY(calc((1 - var(--cooldown, 0)) * 100%)); pointer-events: none; }
.prepared-spells.docked .prepared-spell svg { grid-row: 1 / 3; align-self: center; width: 19px; height: 19px; filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 45%, transparent)); }
.prepared-spells.docked .prepared-spell span { align-self: end; overflow: hidden; text-overflow: ellipsis; font: 800 8px/1 system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #a39f91; }
.prepared-spells.docked .prepared-spell b { z-index: 1; font: 700 9px/1 system-ui, sans-serif; color: #ddd6c8; }
.prepared-spells.docked .prepared-spell.cooling b { color: #8f8b7f; }
.prepared-spells.docked .prepared-spell kbd {
  position: absolute; bottom: 4px; right: 5px; z-index: 1; min-width: 14px; padding: 2px 3px 1px; text-align: center;
  font: 800 9px/1 system-ui, sans-serif; color: #ece5d6; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(221, 214, 200, .32); border-bottom-width: 2px; border-radius: 3px;
}
/* (the equipped spell is told by its gold edge and a gold mark on its name; the words stay for screen readers) */
.prepared-spells.docked .prepared-spell i { display: none; }
.prepared-spells.docked .prepared-spell.current span { color: #e2c27a; }
.prepared-spells.docked .prepared-spell.current b::after { content: " ◆"; color: #e2c27a; font-size: 7px; }
.prepared-spells.docked .prepared-spell.current { border-color: #e2c27a; box-shadow: inset 0 0 8px rgba(226, 194, 122, .18); }
.prepared-spells.docked .prepared-spell.highlighted { border-color: #f1dca6; transform: translateY(-3px); background: rgba(44, 36, 24, .94); box-shadow: 0 0 10px rgba(226, 194, 122, .35), inset 0 0 8px rgba(226, 194, 122, .2); }
@keyframes prepared-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .prepared-spells.docked { animation: none; } .prepared-spells.docked .prepared-spell.highlighted { transform: none; } }

/* Informational only: the actual drag fan retains its full size touch targets. */
.touch-ui .hud-status-stack > .prepared-spells { position: relative; inset: auto; transform: none; width: min(254px, 100%); max-width: 100%; padding: 5px 6px; animation: prepared-rise .16s ease-out; }
.touch-ui .prepared-spells > small { margin-bottom: 4px; }
.touch-ui .prepared-spells > small > span { font: 700 10px/1.1 var(--font-script); letter-spacing: .025em; }
.touch-ui .prepared-spells > small > b { font-size: 9px; }
.touch-ui .prepared-spell-row { gap: 4px; }
.touch-ui .prepared-spell { min-width: 0; grid-template-columns: 12px minmax(0, 1fr); gap: 2px 3px; padding: 4px 3px; }
.touch-ui .prepared-spell svg { width: 12px; height: 12px; }
.touch-ui .prepared-spell span { overflow: hidden; text-overflow: ellipsis; font: 600 9px/1.1 var(--font-script); }
.touch-ui .prepared-spell b { font-size: 8px; line-height: 1; }
.touch-ui .prepared-spell i { display: none; }

@media (prefers-reduced-motion: reduce) { .touch-ui .hud-status-stack > .prepared-spells { animation: none; } }

@container app (max-width: 700px) and (max-height: 420px) {
  .touch-ui .hud-status-stack > .prepared-spells { padding: 3px 4px; }
  .touch-ui .prepared-spells > small { margin-bottom: 2px; }
  .touch-ui .prepared-spell { padding: 2px; gap: 1px 2px; }
}