/* v34 / M18: compact recipes and one licensed functional-icon family. */
img[src*="pixelarticons"]{image-rendering:pixelated}
.brand-bolt::after,.hud-card::after,.recipe-step.is-done::after{content:none!important}

.hud-label{display:flex;align-items:center;gap:6px;white-space:nowrap}
.hud-label>img{flex:0 0 16px;width:16px;height:16px;margin:0;object-fit:contain;color:#8c718b}
.time-card .hud-label>img{color:#c58b2d}.score-card .hud-label>img{color:var(--pink-deep)}

#orderTarget{display:flex;align-items:center;justify-content:flex-end;gap:8px;white-space:nowrap}
#orderTarget>span{display:inline-flex;align-items:center;gap:3px}
#orderTarget img,#orderTarget>span>img{width:12px;height:12px;margin:0;filter:none;color:#8d7188}

.recipe-icons,.recipe-rail[data-steps] .recipe-icons{
  display:flex;flex:0 0 26px;align-items:center;justify-content:center;gap:1px;
  width:100%;height:26px;min-height:26px;margin:0;white-space:nowrap
}
.recipe-icons .recipe-input,.recipe-rail[data-steps] .recipe-step .recipe-input{
  display:inline-flex;flex:0 0 23px;align-items:center;justify-content:center;
  width:23px;height:23px;padding:0;overflow:visible
}
.recipe-icons .recipe-input .recipe-token,.recipe-rail[data-steps] .recipe-icons .recipe-input .recipe-token{width:23px;height:23px}
.recipe-icons .recipe-result-token,.recipe-rail[data-steps] .recipe-step .recipe-result-token{
  display:inline-flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0
}
.recipe-icons .recipe-result-token .recipe-token{width:20px;height:20px}
.recipe-icons>img.recipe-plus,.recipe-icons>img.recipe-result-arrow,
.recipe-rail[data-steps] .recipe-step .recipe-result-arrow{
  display:block;flex:0 0 9px;width:9px;height:9px;margin:0;opacity:.58;filter:none
}
.recipe-step>span{flex:0 0 12px;height:12px;font-size:10px;line-height:12px}
.recipe-step>small{display:block;flex:0 0 9px;width:100%;height:9px;font-size:9px;line-height:9px}
.recipe-step>small img{display:inline-block;width:8px;height:8px;margin:0 2px 0 0;vertical-align:-1px}
.recipe-complete-icon{display:none;position:absolute;top:4px;right:4px;width:14px;height:14px;margin:0;color:var(--green)}
.recipe-step.is-done>.recipe-complete-icon{display:block}
@media(min-width:901px){
  .recipe-icons .recipe-input,.recipe-rail[data-steps] .recipe-step .recipe-input{flex-basis:18px;width:18px;height:18px}
  .recipe-icons .recipe-input .recipe-token,.recipe-rail[data-steps] .recipe-icons .recipe-input .recipe-token{width:18px;height:18px}
  .recipe-icons .recipe-result-token,.recipe-rail[data-steps] .recipe-step .recipe-result-token{flex-basis:18px;width:18px;height:18px}
  .recipe-icons .recipe-result-token .recipe-token{width:18px;height:18px}
  .recipe-icons>img.recipe-plus,.recipe-icons>img.recipe-result-arrow,.recipe-rail[data-steps] .recipe-step .recipe-result-arrow{flex-basis:8px;width:8px;height:8px}
}

.pips{gap:4px}.pips i{width:14px;height:14px;border:0;border-radius:0;background:none;box-shadow:none}
.pips i img{display:block;width:14px;height:14px;opacity:.18;color:#9b8398}
.pips i.on,.pips i.live{background:none;box-shadow:none}.pips i.on img,.pips i.live img{opacity:1;color:var(--green)}

.active-loadout button,.loadout-main{
  display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:6px;
  min-width:0;padding:6px 8px;text-align:left
}
.active-loadout button img,.loadout-main img{width:24px;height:24px;margin:0;object-fit:contain}
.active-loadout button span,.loadout-main span{min-width:0;text-align:left}
.active-loadout button b,.loadout-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.active-loadout button small,.loadout-main small{font-size:9px;white-space:nowrap}
.active-loadout img[src*="pixelarticons"],.tool-guide-button img,.tool-guide-row img,
.support-tool-options img[src*="pixelarticons"],.main-tool-options img[src*="pixelarticons"]{image-rendering:pixelated;filter:none}
.tool-guide-row img{width:20px;height:20px}.tool-guide-button img{width:18px;height:18px}
#resetButton.is-armed img{filter:none}

@media(max-width:620px){
  .hud-label{gap:4px}.hud-label>img{flex-basis:14px;width:14px;height:14px}
  #orderTarget{gap:5px}#orderTarget img,#orderTarget>span>img{width:11px;height:11px}
  .active-loadout button,.loadout-main{grid-template-columns:22px minmax(0,1fr);gap:4px;padding:5px}
  .active-loadout button img,.loadout-main img{width:22px;height:22px}
  .active-loadout button small,.loadout-main small{font-size:9px}
}