/* Compact evolution choices; placement belongs here, appearance uses HUD tokens. */
#evolutionPanel{position:fixed;z-index:45;top:calc(var(--evolution-top,200px) + var(--hud-space-2));right:max(var(--hud-space-3),var(--sar,0px));width:min(300px,calc(100vw - 24px));box-sizing:border-box;color:var(--hud-text);background:var(--hud-surface-overlay);border:var(--hud-border-width) solid var(--hud-border);border-radius:var(--hud-radius);font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-body);max-height:calc(100dvh - var(--evolution-top,200px) - var(--hud-space-2) - 120px);display:flex;flex-direction:column}
#evolutionPanel[hidden]{display:none}
#evolutionPanel{overflow:visible}
#evolutionPanel .evolutionOptions{overflow:visible;flex-shrink:0}
#evolutionPanel header{display:flex;align-items:center;justify-content:space-between;padding:0 0 0 var(--hud-space-2);gap:var(--hud-space-2);flex:none}
#evolutionPanel h2{margin:0;font:var(--hud-text-xs)/var(--hud-leading) var(--hud-font-label);color:var(--hud-accent)}
#evolutionPanel button{font:inherit;color:inherit;cursor:pointer;border:0;background:var(--hud-surface-control);border-radius:var(--hud-radius);touch-action:manipulation}
#evolutionPanel header button{flex:0 0 var(--hud-target);width:var(--hud-target);height:var(--hud-target);padding:0;font-size:var(--hud-text-body);color:var(--hud-text-muted);background:transparent}
#evolutionPanel button:focus-visible{outline:var(--hud-border-width) solid var(--hud-focus);outline-offset:calc(-1 * var(--hud-border-width))}
#evolutionPanel header button:hover{color:var(--hud-accent)}
.evolutionOptions{display:grid;gap:var(--hud-space-1);padding:0 var(--hud-space-1) var(--hud-space-1);min-height:0}
.evolutionOptions button{position:relative;display:flex;align-items:flex-start;gap:var(--hud-space-2);text-align:left;padding:var(--hud-space-2);min-height:var(--hud-target)}
.evolutionOptions button:hover,.evolutionOptions button:focus-visible{background:var(--hud-surface-raised)}
.evolutionOptions button:active{background:var(--hud-surface-inset)}
.evolutionCopy{display:block;flex:1;min-width:0;overflow-wrap:anywhere}
.evolutionOptions b{display:block;color:var(--hud-accent);font-size:var(--hud-text-sm);line-height:var(--hud-leading)}
.evolutionOptions small{display:block;font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-body);color:var(--hud-text-muted)}
.evolutionIcon{position:relative;display:block;flex:0 0 calc(var(--hud-space-4)*2);width:calc(var(--hud-space-4)*2);height:calc(var(--hud-space-4)*2);box-sizing:border-box;overflow:hidden;background:var(--hud-surface-inset)}
/* Painted hero strips downsample smoothly; only the pixel mechanic fallback stays crisp. */
.evolutionIcon>img{position:absolute;width:300%;height:100%;max-width:none;image-rendering:auto;pointer-events:none}
.evolutionIcon>img[data-pixel]{image-rendering:pixelated}

#evolutionPanel[data-view='collapsed']{width:auto}
#evolutionPanel .evolutionReopen{display:flex;align-items:center;gap:var(--hud-space-2);text-align:left;padding:var(--hud-space-2);min-height:var(--hud-target);color:var(--hud-accent)}
#evolutionPanel .evolutionReopen:hover{background:var(--hud-surface-raised)}
@media(max-width:600px){#evolutionPanel{right:max(var(--hud-space-2),var(--sar,0px));width:min(280px,calc(100vw - 16px));max-height:calc(100dvh - var(--evolution-top,100px) - var(--hud-space-2) - 192px)}}
@media(max-height:500px){#evolutionPanel{right:max(var(--hud-space-2),var(--sar,0px));width:min(300px,calc(100vw - 16px));max-height:calc(100dvh - var(--evolution-top,100px) - var(--hud-space-2) - 100px)}}
@media(orientation:landscape){body.touch #evolutionPanel{right:calc(var(--evolution-right,104px) + var(--hud-space-2));}}
body.touch #evolutionPanel{max-width:calc(var(--evolution-width,100vw) - 2 * var(--hud-space-2));max-height:calc(var(--evolution-height,100dvh) - 2 * var(--hud-space-2));}
@media(max-width:600px) and (max-height:500px){body:not(.touch) #evolutionPanel{width:calc(var(--evolution-width,50vw) - 2 * var(--hud-space-2));max-height:calc(100dvh - var(--evolution-top,100px) - var(--hud-space-2) - 60px);}}
.slot .evolutionBadge{position:absolute;inset:2px;z-index:1;pointer-events:none;border-radius:inherit;overflow:hidden;}
.slot .evolutionBadge .evolutionIcon{width:100%;height:100%;min-width:0;background:var(--hud-surface-inset);}

.evolutionOptions .hud-upgrade-choice{align-items:center;gap:var(--hud-space-2);min-height:calc(var(--hud-target) + 2 * var(--hud-space-1));padding:var(--hud-space-1);border:var(--hud-border-width) solid var(--hud-border-subtle)}
.evolutionOptions .hud-upgrade-choice .evolutionIcon,.evolutionOptions .hud-upgrade-choice .signatureConcept{width:calc(var(--hud-space-4)*2);height:calc(var(--hud-space-4)*2);flex-basis:calc(var(--hud-space-4)*2)}
.evolutionOptions .evolutionName{flex:1;min-width:0;overflow-wrap:anywhere}
.evolutionOptions:has(button:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
#evolutionPanel .evolutionOptions:has(button:nth-child(4)) b{font-size:var(--hud-text-xs)}
@media(max-height:600px){
  .evolutionOptions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .evolutionOptions .hud-upgrade-choice{gap:var(--hud-space-1)}
  .evolutionOptions .hud-upgrade-choice :is(.evolutionIcon,.signatureConcept){width:var(--hud-space-6);height:var(--hud-space-6);flex-basis:var(--hud-space-6)}
  #evolutionPanel .hud-upgrade-choice b{font-size:var(--hud-text-xs)}
}

body:not(.touch) #evolutionPanel{overflow:auto;}
/* One column per choice: heroes offer two or three, and a fixed third column left a dead gap. */
body:not(.touch) #evolutionPanel .evolutionOptions{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);flex-shrink:1;}
body:not(.touch) #evolutionPanel .evolutionOptions:has(button:nth-child(4)){grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));}
body:not(.touch) #evolutionPanel .hud-upgrade-choice{flex-wrap:wrap;}

/* TLDR under each choice: gain, then cost. Glyphs come from CSS so the phrases translate whole. */
.evolutionOptions .evolutionTldr{display:block;margin-top:2px;font:var(--hud-text-xs)/1.25 var(--hud-font-body);font-weight:var(--hud-weight-regular)}
.evolutionTldr>span{display:block;padding-left:1.1em;text-indent:-1.1em}
.evolutionTldr .evolutionGain{color:var(--hud-text)}
.evolutionTldr .evolutionCost{color:var(--hud-text-muted)}
.evolutionTldr .evolutionGain::before{content:'+';display:inline-block;width:1.1em;text-indent:0;color:var(--hud-health);font-weight:var(--hud-weight-strong)}
.evolutionTldr .evolutionCost::before{content:'\2212';display:inline-block;width:1.1em;text-indent:0;color:var(--hud-danger);font-weight:var(--hud-weight-strong)}