/* 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);image-rendering:pixelated}
.evolutionIcon>img{position:absolute;width:400%;height:400%;max-width:none;image-rendering:pixelated;pointer-events:none}

#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;}
.slot .evolutionBadge .evolutionIcon{width:100%;height:100%;min-width:0;background:var(--hud-surface-inset);}

.evolutionOptions summary{display:flex;align-items:center;gap:var(--hud-space-2);min-height:var(--hud-target);padding:var(--hud-space-1);cursor:pointer;list-style:none}
.evolutionOptions summary .evolutionIcon,.evolutionOptions summary .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 .evolutionSlot{display:none}
.evolutionOptions summary::-webkit-details-marker{display:none}
.evolutionOptions summary::after{content:'+';margin-left:auto;flex:none;font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-label);color:var(--hud-text-muted)}
.evolutionOptions details[open] summary::after{content:'−'}
.evolutionBack{display:none;font:var(--hud-text-xs)/var(--hud-leading) var(--hud-font-body);color:var(--hud-text-muted)}
.evolutionOptions details[open] .evolutionBack{display:block}
.evolutionOptions details[open] summary::after{display:none}
.evolutionOptions summary:focus-visible{outline:var(--hud-border-width) solid var(--hud-focus);outline-offset:calc(-1 * var(--hud-border-width))}
.evolutionOptions summary:hover{background:var(--hud-surface-raised)}
.evolutionOptions .evolutionCopy{padding:var(--hud-space-2);border-top:var(--hud-border-width) solid var(--hud-border-subtle)}
.evolutionOptions .evolutionCopy button{margin-top:var(--hud-space-2);width:100%;align-items:center;justify-content:center;background:var(--hud-accent);color:var(--hud-text-on-accent)}
#evolutionPanel .evolutionCopy button{background:var(--hud-accent);color:var(--hud-text-on-accent)}
#evolutionPanel .evolutionCopy button:hover{background:var(--hud-accent-hover)}
/* Inspect one variation in place; the summary returns to the complete list. */
#evolutionPanel:has(details[open]) header{display:none}
.evolutionOptions:has(details[open]) details:not([open]){display:none}
#evolutionPanel:has(details[open]) .evolutionOptions{padding-top:var(--hud-space-1)}
.evolutionOptions:has(details:nth-child(4)):not(:has(details[open])){grid-template-columns:repeat(2,minmax(0,1fr))}
.evolutionOptions:has(details:nth-child(4)):not(:has(details[open])) summary::after{display:none}
#evolutionPanel .evolutionOptions:has(details:nth-child(4)) summary b{font-size:var(--hud-text-xs)}
@media(max-height:600px){
  #evolutionPanel .evolutionCopy small{font-size:var(--hud-text-xs)}
}
@media(max-height:500px){
  .evolutionOptions:not(:has(details[open])){grid-template-columns:repeat(2,minmax(0,1fr))}
  .evolutionOptions:not(:has(details[open])) summary{gap:var(--hud-space-1)}
  .evolutionOptions:not(:has(details[open])) summary::after{display:none}
  .evolutionOptions:not(:has(details[open])) summary :is(.evolutionIcon,.signatureConcept){width:var(--hud-space-6);height:var(--hud-space-6);flex-basis:var(--hud-space-6)}
  .evolutionOptions .evolutionCopy{padding:var(--hud-space-1)}
  .evolutionOptions .evolutionCopy button{margin-top:var(--hud-space-1)}
  #evolutionPanel .hud-upgrade-choice summary b{font-size:var(--hud-text-xs)}
  #evolutionPanel .evolutionCopy small{font-size:var(--hud-text-xs)}
}