/* Reinforcement quality is readable as text as well as color. No animation or
   image asset is needed: the two highest tiers use a lightweight static glow. */
.quality-white{--quality-color:#f3f5f8;--quality-glow:none}
.quality-blue{--quality-color:#83c8ff;--quality-glow:none}
.quality-purple{--quality-color:#d7a6ff;--quality-glow:none}
.quality-gold{--quality-color:#ffdc7b;--quality-glow:0 0 6px rgba(255,187,58,.7),0 0 16px rgba(255,166,32,.38)}
.quality-red{--quality-color:#ff8c94;--quality-glow:0 0 6px rgba(255,76,99,.8),0 0 18px rgba(255,49,81,.46)}
.quality-unowned,.quality-unknown{--quality-color:#a5afbd;--quality-glow:none}
.ocean-quality-name{
 display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.35em .5em;
 color:var(--quality-color,#f3f5f8);line-height:1.3;text-shadow:var(--quality-glow,none)
}
.ocean-quality-name .quality-name-text{min-width:0;color:inherit;font:inherit;text-shadow:inherit;overflow-wrap:anywhere}
.ocean-quality-name .quality-label,.ocean-quality-name .quality-evolution{
 display:inline-block;flex:none;padding:.13em .42em;border:1px solid currentColor;border-radius:.4em;
 color:inherit;background:rgba(8,16,32,.56);font-size:.68em;font-weight:800;line-height:1.2;
 letter-spacing:.03em;white-space:nowrap;text-shadow:none
}
.ocean-quality-name .quality-evolution{color:#a1eedb;border-color:rgba(161,238,219,.45)}