/* Four persistent controls. Minimum55 logical pixels preserves44px at80% HUD zoom. */
#ability-row {display:flex;flex-direction:column;align-items:stretch;gap:6px;min-height:0;}
.active-abilities {display:grid;grid-template-columns:repeat(4,minmax(55px,1fr));gap:6px;width:100%;}
#ability-row .active-slot {pointer-events:auto;touch-action:manipulation;position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:1fr 1fr;align-items:center;justify-items:start;column-gap:7px;width:100%;height:66px;min-width:55px;min-height:55px;padding:8px 10px;color:#e5f6ff;font:inherit;background:#081522ed;border:1px solid #77b9cf77;cursor:pointer;animation:none;overflow:hidden;}
.active-slot .ability-key {position:absolute;top:4px;left:5px;font:700 10px var(--font-mono);color:#9fc8da;z-index:1;}
.active-slot canvas {grid-column:1;grid-row:1 / 3;width:22px!important;height:22px!important;max-width:100%;}
.active-slot .ability-name {grid-column:2;grid-row:1;font-size:12px;line-height:1.15;font-weight:700;letter-spacing:0;white-space:nowrap;max-width:100%;}
.active-slot .ability-status {grid-column:2;grid-row:2;font:600 11px var(--font-mono);line-height:1.2;letter-spacing:.035em;color:#a8eac6;}
.active-slot .cd {inset:auto 0 0;height:3px;display:block;background:#ffcc69;transform:scaleX(var(--cooldown,0));transform-origin:left;pointer-events:none;}
.active-slot.locked {border-color:#617c8a55;background:#09121ded;color:#7e96a5;}
.active-slot.locked canvas {opacity:.45;filter:grayscale(1);}
.active-slot.locked .ability-status {color:#91a1aa;}
.active-slot.cooling {border-color:#bda16c77;}
.active-slot.cooling .ability-status {color:#ffd166;}
.active-slot:hover {border-color:#a3eaf4;background:#122a39;}
.active-slot:focus-visible {outline:2px solid #a6f0ff;outline-offset:2px;z-index:2;}
.passive-abilities {display:flex;flex-wrap:wrap;justify-content:center;gap:4px;min-height:0;}
.passive-abilities:empty {display:none;}
#ability-row .passive-abilities .abil {width:auto;height:auto;min-height:22px;max-width:100%;padding:3px 6px;font-size:12px;line-height:1.25;letter-spacing:0;white-space:normal;overflow-wrap:anywhere;animation:none;}
.passive-abilities canvas {width:20px!important;height:20px!important;}
#combo-ready {font-size:12px;line-height:1.3;max-height:2.6em;overflow:hidden;overflow-wrap:anywhere;}
body.touch:not(.practicing) #hud-bottom {left:50%;transform:translateX(-50%);width:calc(100% - 230px);max-width:680px;gap:5px;}
@media(max-width:600px) and (min-height:521px) {
 body.touch:not(.practicing) #hud-bottom {left:14px;transform:none;width:calc(100% - 28px);gap:5px;}
 .active-abilities {grid-template-columns:repeat(2,minmax(55px,1fr));gap:6px;}
 #ability-row .active-slot {height:55px;padding:6px 11px;grid-template-columns:24px minmax(0,1fr);column-gap:9px;}
 .active-slot .ability-name{font-size:12px;}
 body.touch #dash-btn {bottom:calc(245px + env(safe-area-inset-bottom));}
 body.touch:not(.practicing) #minimap {width:64px;height:64px;bottom:calc(346px + env(safe-area-inset-bottom));right:calc(26px + env(safe-area-inset-right));}
 #combo-ready {max-height:2.6em;}
}
@media(orientation:landscape) and (max-height:520px) {
 body.touch:not(.practicing) #hud-bottom {left:50%;transform:translateX(-50%);width:calc(100% - 230px);max-width:680px;gap:3px;}
 #ability-row {gap:3px;}
 #ability-row .active-slot {height:55px;padding:5px;display:flex;flex-direction:column;justify-content:center;gap:2px;}
 .active-slot canvas {position:absolute;right:4px;top:4px;width:14px!important;height:14px!important;opacity:.55;}
 .active-slot .ability-name {font-size:10px;line-height:1.2;margin-top:7px;}
 .active-slot .ability-status {font-size:11px;}
 .active-slot .ability-key{font-size:9px;}
 #combo-ready {font-size:11px;line-height:1.25;max-height:1.25em;white-space:nowrap;text-overflow:ellipsis;}

 body.touch #dash-btn {bottom:calc(24px + env(safe-area-inset-bottom));}
 body.touch:not(.practicing) #minimap {bottom:calc(124px + env(safe-area-inset-bottom));right:calc(26px + env(safe-area-inset-right));width:64px;height:64px;}
}

@media(max-width:1100px) and (min-height:521px) {
 #ability-row .active-slot {display:flex;flex-direction:column;justify-content:center;align-items:center;padding:6px;gap:3px;}
 .active-slot canvas {position:absolute;right:5px;top:4px;width:14px!important;height:14px!important;opacity:.5;}
 .active-slot .ability-name {font-size:12px;line-height:1.2;margin-top:7px;}
 .active-slot .ability-key {font-size:10px;}
}

/* The first-run hint participates in the HUD stack instead of covering controls. */
#hud-bottom #onb-hint {position:static;transform:none;align-self:center;max-width:100%;box-sizing:border-box;white-space:normal;text-align:center;font-size:12px;line-height:1.3;letter-spacing:.06em;padding:5px 8px;}

@media(max-width:600px) and (min-height:521px) {
 .passive-abilities {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
 #ability-row .passive-abilities .abil {text-align:center;align-items:center;padding:3px 4px;}
 #hud-bottom #onb-hint,#hud-bottom #combo-ready {max-width:calc(100% - 104px);align-self:flex-start;text-align:left;margin-left:0;margin-right:0;}
}