/* Shared battle/training ability cards. Presentation never owns cooldown timers. */
#abilities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;min-width:0}
#abilities .ability{--ready:100%;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:5px;min-width:0;height:106px;min-height:106px;padding:10px 12px;overflow:hidden;text-align:left;color:#f4fbff;border:1px solid #16c8f1;border-radius:10px;background:linear-gradient(135deg,#062c43f5,#041b2ff5);box-shadow:0 3px 12px #00152555,inset 0 1px #a9efff12;cursor:pointer;opacity:1;filter:none;transition:border-color .14s,box-shadow .14s,transform .1s}
#abilities .ability .ability-fill{position:absolute;inset:0;z-index:0;width:var(--ready);background:linear-gradient(105deg,#008c4c99,#00cf57c9);border-right:1px solid #67ffaab0;box-shadow:2px 0 12px #00ff8140;pointer-events:none;transition:width .085s linear}
#abilities .ability.is-resetting .ability-fill{transition:none}
#abilities .ability>*:not(.ability-fill){position:relative;z-index:1;pointer-events:none}
#abilities .ability .ability-top{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
#abilities .ability kbd{display:flex;align-items:center;justify-content:flex-start;align-self:stretch;flex:0 0 25px;border:0;border-right:1px solid #92e6e756;border-radius:0;background:none;padding:0;font:900 27px/1 'Segoe UI',sans-serif;color:#fff;text-shadow:0 2px 3px #001d2c}
#abilities .ability strong{flex:1;min-width:0;margin:0;white-space:normal;overflow-wrap:normal;text-overflow:clip;font:850 14px/1.1 'Segoe UI',sans-serif!important;text-transform:uppercase;letter-spacing:-.15px;color:#fff;text-shadow:0 1px 3px #001523}
#abilities .ability .move-type{flex:0 0 auto;padding:4px 5px;border:1px solid color-mix(in srgb,var(--accent),white 20%);border-radius:5px;background:color-mix(in srgb,var(--accent) 78%,#092838);color:#fff;font:800 9px/1 'Segoe UI',sans-serif;text-transform:uppercase;text-shadow:0 1px 2px #001423}
#abilities .ability .ability-meta{display:flex;align-items:center;justify-content:flex-start;gap:7px;min-height:28px}
#abilities .ability .ability-hit{font:700 27px/1 'Segoe UI Symbol',sans-serif;color:#ffc84d;text-shadow:0 1px 2px #754c12}
#abilities .ability.is-healing .ability-hit{color:#78ff94;text-shadow:none}
#abilities .ability .ability-meta b{font:900 30px/1 'Segoe UI',sans-serif;color:#fff;text-shadow:0 2px 3px #012b33}
#abilities .ability .damage-label{font:800 10px/1.1 'Segoe UI',sans-serif;color:#bce7f4}
#abilities .ability .ability-foot{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:13px}
#abilities .ability .move-effect{margin:0;font:800 10px/1.2 'Segoe UI',sans-serif;letter-spacing:.2px;white-space:normal;color:#c6edf7;text-shadow:0 1px 3px #00303a}
#abilities .ability .cool-number{position:static;transform:none;margin-left:auto;flex:0 0 auto;font:700 10px/1 'Segoe UI',sans-serif;color:#d5f5ff}
#abilities .ability.is-ready{border-color:#70ffba!important;box-shadow:0 0 9px #00e77a40,inset 0 0 7px #19ff6e22;animation:none}
#abilities .ability.is-unavailable{cursor:default}
#abilities .ability.is-unavailable:not(.is-ready){border-color:#1794b7}
#abilities .ability:hover{border-color:#efffa6;box-shadow:0 0 10px #39dbeb55;transform:translateY(-1px)}
#abilities .ability:active{transform:translateY(1px);box-shadow:inset 0 0 15px #7cffe033}
#abilities .ability:focus-visible{outline:2px solid #ffe078;outline-offset:2px}
body.in-battle .combat-dock{grid-template-columns:minmax(0,240px) minmax(340px,540px)}
@media(max-width:850px),(max-height:650px){#abilities .ability{height:96px;min-height:96px;padding:8px 10px}#abilities .ability strong{font-size:12px!important}#abilities .ability .ability-meta b{font-size:27px}#abilities .ability .move-type{font-size:8px}}
@media(max-width:600px){body.in-battle .combat-dock{grid-template-columns:1fr}#abilities{gap:6px}#abilities .ability{height:91px;min-height:91px;padding:7px 8px}#abilities .ability kbd{flex-basis:20px;font-size:23px}#abilities .ability .ability-top{gap:5px}#abilities .ability strong{font-size:11px!important}#abilities .ability .move-type{font-size:7px;padding:3px}#abilities .ability .move-effect,#abilities .ability .damage-label{font-size:9px}#abilities .ability .ability-meta b{font-size:25px}}
@media(prefers-reduced-motion:reduce){#abilities .ability,#abilities .ability .ability-fill{transition:none}}