/*
    jRandomSkills - styling for skill_hud.xml (stage 1 of the Panorama HUD replacement).

    Panorama CSS, not web CSS - see CustomHudDemo/PanoramaHudDemo's own panel_demo.css for the
    general traps (visibility:collapse not display:none, #rrggbbaa colors, silent unknown-property
    drops, horizontal-align/vertical-align needing to be set on both the flow parent AND the flowed
    child - not just the parent).
*/

.skillhud-viewport {
    width: 100%;
    height: 100%;
}

.skillhud-root {
    width: 100%;
    height: 100%;
    flow-children: down;
    horizontal-align: center;
    vertical-align: bottom;
}

.hidden {
    visibility: collapse;
}

.skillhud-card {
    width: 320px;
    flow-children: down;
    horizontal-align: center;
    /* Bottom-anchored on both the root and the card (align needs setting on both ends of a flow):
       the bottom edge stays 125px up and extra lines grow the card upwards. */
    vertical-align: bottom;
    margin-bottom: 125px;
    background-color: #14161bd0;
    border: 1px solid #3a3a3aff;
    border-radius: 4px;
    padding: 6px 16px 8px 16px;
}

.skillhud-skill {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    horizontal-align: center;
    text-align: center;
}

/* Real per-skill hex colors (skillsInfo.json) can't be sent from the server - only a class toggle
   can. These 5 stand in for them, picked by PlayerEvents.cs from the skill's own Rarity. Same
   palette already used elsewhere in this repo's Panorama work (admin_hud.css's accent-* classes),
   not invented fresh here. */
.skillhud-skill.rarity-common    { color: #9aa2acff; }
.skillhud-skill.rarity-uncommon  { color: #4caf6dff; }
.skillhud-skill.rarity-rare      { color: #4a90d9ff; }
.skillhud-skill.rarity-epic      { color: #9b6cd6ff; }
.skillhud-skill.rarity-legendary { color: #f0a531ff; }

.skillhud-extra {
    width: 100%;
    font-size: 13px;
    color: #9aa2acff;
    white-space: normal;
    horizontal-align: center;
    text-align: center;
    margin-top: 4px;
}

/* A skill's own status line (cooldown, fuel, countdown) rather than its description. */
.skillhud-extra.info {
    font-size: 13px;
    color: #f0f2f5ff;
}

/* Blank extra line collapses rather than leaving a gap - most skills without a description
   visible right now (showDescriptionHUD false) would otherwise leave an empty row. */
.skillhud-extra.empty {
    visibility: collapse;
}