/* One shared, joined battle/training HUD. Only presentation reads the live cooldown. */
#abilities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;min-width:0;border-radius:12px;overflow:hidden;isolation:isolate}
#abilities .ability{--ready:100%;--element:var(--accent,#96aaa1);position:relative;isolation:isolate;display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-rows:34px 35px 16px;column-gap:8px;row-gap:0;min-width:0;height:106px;min-height:106px;padding:9px 10px;overflow:hidden;text-align:left;color:#fff;border:0;border-radius:0;background:color-mix(in srgb,var(--element) 38%,#10131d);box-shadow:none;cursor:pointer;opacity:1;filter:none;font-family:Consolas,'Lucida Console',ui-monospace,monospace;transition:filter .12s}
#abilities .ability:nth-child(odd){border-right:1px solid #dfd5ac80}
#abilities .ability:nth-child(-n+2){border-bottom:1px solid #dfd5ac80}
#abilities .ability .ability-fill{position:absolute;inset:0;z-index:0;width:var(--ready);background:var(--element);border:0;box-shadow:none;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:contents}
#abilities .ability kbd{grid-column:1;grid-row:1/3;display:flex;align-items:flex-start;justify-content:center;border:0;border-right:1px solid #ffedcead;border-radius:0;background:none;padding:3px 6px 0 0;font:900 40px/1 Consolas,monospace;color:#fff}
#abilities .ability strong{grid-column:2;grid-row:1;align-self:start;min-width:0;margin:3px 0 0;white-space:normal;overflow-wrap:anywhere;font:900 13px/1.12 Consolas,'Lucida Console',monospace!important;text-transform:uppercase;letter-spacing:-.6px;color:#fff}
#abilities .ability .move-type{grid-column:3;grid-row:1;align-self:start;margin-top:2px;padding:4px;border:1px solid #ead4a3;border-radius:4px;background:color-mix(in srgb,var(--accent) 65%,#4d382a);color:#fff;font:900 8px/1 Consolas,monospace;text-transform:uppercase}
#abilities .ability .ability-meta{grid-column:2/4;grid-row:2;display:flex;align-items:center;gap:6px;min-width:0}
#abilities .ability .ability-hit{display:none}
#abilities .ability .ability-meta b{font:900 34px/1 Consolas,monospace;color:#ffe82f}
#abilities .ability .damage-label{font:900 10px/1.15 Consolas,monospace;color:#ffe82f}
#abilities .ability .ability-foot{grid-column:1/4;grid-row:3;display:flex;align-items:end;justify-content:space-between;gap:4px;min-width:0}
#abilities .ability .move-effect{margin:0;font:900 10px/1.1 Consolas,monospace;letter-spacing:0;white-space:normal;color:#def5ff}
#abilities .ability .cool-number{position:static;transform:none;margin-left:auto;font:700 9px/1 Consolas,monospace;color:#fff;flex:none}
#abilities .ability :is(kbd,strong,.ability-meta b,.damage-label,.move-effect,.move-type,.cool-number){text-shadow:1px 0 #16191e,-1px 0 #16191e,0 1px #16191e,0 -1px #16191e,1px 1px #16191e,-1px -1px #16191e; -webkit-text-stroke:0}
#abilities .ability.is-ready{box-shadow:none;animation:none}
#abilities .ability.is-unavailable{cursor:default}
#abilities .ability:hover{filter:brightness(1.07);transform:none;box-shadow:none}
#abilities .ability:active{filter:brightness(.9);transform:none;box-shadow:inset 0 0 0 2px #fff5}
#abilities .ability:focus-visible{outline:2px solid #fff0a0;outline-offset:-3px}
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;grid-template-rows:31px 31px 16px;padding:8px}#abilities .ability strong{font-size:12px!important}#abilities .ability .ability-meta b{font-size:30px}}
@media(max-width:600px){body.in-battle .combat-dock{grid-template-columns:1fr}#abilities .ability{height:91px;min-height:91px;padding:7px;grid-template-columns:25px minmax(0,1fr) auto;grid-template-rows:30px 30px 16px;column-gap:5px}#abilities .ability kbd{font-size:32px}#abilities .ability strong{font-size:11px!important;letter-spacing:-.7px}#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:28px}}
@media(prefers-reduced-motion:reduce){#abilities .ability,#abilities .ability .ability-fill{transition:none}}
/* Element colors belong only to the HUD; gameplay palettes stay unchanged. */
#abilities .ability[data-element=fire]{--element:#f23632}
#abilities .ability[data-element=water]{--element:#167fef}
#abilities .ability[data-element=electric]{--element:#f3c817}
#abilities .ability[data-element=grass]{--element:#31b75d}
#abilities .ability[data-element=ice]{--element:#50cadd}
#abilities .ability[data-element=psychic]{--element:#df49a8}
#abilities .ability[data-element=ghost]{--element:#67408d}
#abilities .ability[data-element=dark]{--element:#353840}
#abilities .ability[data-element=poison]{--element:#b052d0}
#abilities .ability[data-element=dragon]{--element:#7064ed}
#abilities .ability[data-element=fighting]{--element:#df6c42}
#abilities .ability[data-element=flying]{--element:#81a8e2}
#abilities .ability[data-element=steel]{--element:#88afbe}
#abilities .ability[data-element=rock]{--element:#9d907a}
#abilities .ability[data-element=ground]{--element:#c28c3d}
#abilities .ability[data-element=bug]{--element:#99b827}
#abilities .ability[data-element=normal]{--element:#96aaa1}

#abilities .ability[data-element=fairy]{--element:#ed9ec4}

#abilities .ability .ability-top>*,#abilities .ability .ability-meta>*{position:relative;z-index:1}
/* Pixel display font served locally with its OFL license; isolated to ability HUD. */
@font-face{font-family:ArenaPixel;src:url('./assets/fonts/Jersey10-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
#abilities .ability[data-element=fire]{--element:#e72b20}
#abilities .ability[data-element=water]{--element:#0769e8}
#abilities .ability[data-element=electric]{--element:#f5c900}
#abilities .ability[data-element=grass]{--element:#10ac37}
#abilities .ability[data-element=ice]{--element:#20bedc}
#abilities .ability[data-element=psychic]{--element:#e41b91}
#abilities .ability[data-element=poison]{--element:#9827c4}
#abilities .ability[data-element=dragon]{--element:#5838dd}
#abilities .ability[data-element=fighting]{--element:#b83d25}
#abilities .ability[data-element=flying]{--element:#657dd9}
#abilities .ability[data-element=steel]{--element:#607b91}
#abilities .ability[data-element=rock]{--element:#8b6a2d}
#abilities .ability[data-element=ground]{--element:#bb741b}
#abilities .ability[data-element=bug]{--element:#809b0b}
#abilities .ability[data-element=normal]{--element:#626e7b}
#abilities .ability[data-element=fairy]{--element:#e66bac}
body #abilities .ability{grid-template-columns:34px minmax(0,1fr) auto;grid-template-rows:33px 38px 16px;column-gap:9px;background:color-mix(in srgb,var(--element) 40%,#11131b);font-synthesis:none}
body #abilities .ability .ability-fill{background:var(--element);opacity:1;filter:none}
body #abilities .ability kbd{font:400 48px/1 ArenaPixel,monospace;padding:0 6px 0 0}
body #abilities .ability strong{font:400 20px/.9 ArenaPixel,monospace!important;letter-spacing:0;margin-top:2px}
body #abilities .ability .ability-meta{justify-content:flex-start;flex-wrap:nowrap;gap:6px}
body #abilities .ability .ability-meta b{font:400 46px/.9 ArenaPixel,monospace;color:#ffe923;flex:none}
body #abilities .ability .damage-label{font:400 15px/1 ArenaPixel,monospace;color:#ffe923;flex:none;margin:0}
body #abilities .ability .move-effect{font:400 16px/1 ArenaPixel,monospace;letter-spacing:0;color:#d7f5ff}
body #abilities .ability .move-type{font:400 13px/1 ArenaPixel,monospace;padding:3px 5px}
body #abilities .ability .cool-number{font:400 13px/1 ArenaPixel,monospace}
body #abilities .ability :is(kbd,strong,.ability-meta b,.damage-label,.move-effect){text-shadow:2px 0 #20201f,-2px 0 #20201f,0 2px #20201f,0 -2px #20201f,2px 2px #20201f,-2px -2px #20201f,-2px 2px #20201f,2px -2px #20201f}
@media(max-width:850px),(max-height:650px){body #abilities .ability{grid-template-rows:30px 33px 16px}body #abilities .ability strong{font-size:18px!important}body #abilities .ability kbd{font-size:44px}body #abilities .ability .ability-meta b{font-size:40px}body #abilities .ability .damage-label{font-size:14px}}
@media(max-width:600px){body #abilities .ability{grid-template-columns:25px minmax(0,1fr) auto;grid-template-rows:29px 31px 16px;column-gap:5px}body #abilities .ability strong{font-size:16px!important}body #abilities .ability kbd{font-size:39px}body #abilities .ability .ability-meta b{font-size:36px}body #abilities .ability .damage-label{font-size:12px}body #abilities .ability .move-type{font-size:11px;padding:3px}body #abilities .ability .move-effect{font-size:14px}}