#reactorDialog{position:fixed;z-index:18;inset:auto var(--hud-space-3) auto auto;top:calc(196px + var(--sat,0px));right:calc(var(--hud-space-3) + var(--sar,0px));margin:0;width:min(240px,70vw);max-height:calc(100dvh - 380px - var(--sat,0px) - var(--sab,0px));box-sizing:border-box;overflow:auto;overscroll-behavior:contain;}
#reactorDialog h2,#reactorDialog p{margin:0;}
.reactorHeading{position:sticky;top:0;z-index:1;background:var(--hud-surface-overlay);padding-block:var(--hud-space-1);justify-content:space-between;}
.reactorChoices{display:grid;grid-template-columns:1fr;gap:var(--hud-space-2);}
.reactorChoice{display:grid;grid-template-columns:40px 1fr;align-items:start;gap:var(--hud-space-1) var(--hud-space-2);min-height:var(--hud-target);}.reactorChoice small,.reactorChoice .hud-choice-action{grid-column:2;}
.reactorChoice .reactorIcon{width:40px;height:40px;grid-row:1/4;align-self:start;}
.reactorChoice .hud-choice-action{margin-top:auto;}
.reactorHeading h2{flex:1;min-width:0;}
.reactorIcon{display:inline-block;position:relative;overflow:hidden;width:48px;height:48px;flex:none;vertical-align:middle;}
.reactorIcon img{position:absolute;width:400%;height:400%;max-width:none;image-rendering:pixelated;}
.reactorBuild{display:flex;flex-wrap:wrap;gap:var(--hud-space-2);}
.reactorBuild span{display:inline-flex;align-items:center;gap:var(--hud-space-1);}
.reactorBuild .reactorIcon{width:32px;height:32px;}
/* Utility-bar entry beside Options; hidden outside reactor matches. */
#reactorEntry{position:relative;min-height:var(--hud-target);padding:var(--hud-space-2) var(--hud-space-3);font:var(--hud-text-xs)/var(--hud-leading) var(--hud-font-label);white-space:nowrap;background:var(--hud-surface-raised);border:var(--hud-border-width) solid var(--hud-border);}
#reactorEntry[hidden]{display:none;}
#reactorEntry[data-reactors]{border-color:var(--hud-accent);}
#reactorEntry[data-reactors]::after{content:attr(data-reactors);position:absolute;right:0;bottom:0;min-width:var(--hud-space-4);background:var(--hud-accent);color:var(--hud-text-on-accent);font:var(--hud-text-xs)/var(--hud-leading) var(--hud-font-label);border-radius:var(--hud-radius);}
body.touch #reactorDialog{top:calc(216px + var(--sat,0px));}
@media(max-height:440px){#reactorDialog,body.touch #reactorDialog{top:calc(var(--hud-space-2) + var(--sat,0px));right:calc(112px + var(--sar,0px));max-height:calc(100dvh - var(--hud-space-4) - var(--sat,0px) - var(--sab,0px));width:min(220px,40vw);}}

body:not(.touch) .reactorChoices{grid-template-columns:repeat(3,minmax(0,1fr));}
body:not(.touch) .reactorChoice{grid-template-columns:1fr;}
body:not(.touch) .reactorChoice small{grid-column:1;}
body:not(.touch) .reactorChoice .reactorIcon{grid-row:auto;}
/* A phone in landscape has 393px of height: the 220px column needed a scroll to reach the third augment and
   its right edge covered the second skill button. On touch it takes the free band between the minimap column
   and the thumb cluster instead, one compact row per augment, sized to fit without scrolling. */
@media(max-height:440px){
  body.touch #reactorDialog{
    left:calc(var(--sal,0px) + var(--combat-map,104px) + 24px);
    right:calc(var(--sar,0px) + var(--combat-cluster-w,300px));
    top:calc(var(--sat,0px) + var(--hud-space-2));
    width:auto;max-width:none;
    max-height:calc(100dvh - var(--sat,0px) - var(--sab,0px) - var(--hud-space-4));
  }
  body.touch #reactorDialog .reactorChoice{grid-template-columns:32px 1fr;min-height:0;gap:0 var(--hud-space-2);}
  body.touch #reactorDialog .reactorChoice .reactorIcon{width:32px;height:32px;grid-row:1/3;}
  body.touch #reactorDialog .reactorChoice small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
  body.touch #reactorDialog .reactorBuild .reactorIcon{width:24px;height:24px;}
  /* 393px of height has to hold three augments and the reroll without a scroll. */
  body.touch #reactorDialog .reactorChoice{padding:var(--hud-space-1) var(--hud-space-2);}
  body.touch #reactorDialog .reactorChoice small{font:11px/14px var(--hud-font-body);}
  body.touch #reactorDialog .hud-stack,body.touch #reactorDialog .reactorChoices{gap:var(--hud-space-1);}
}
/* 320px-tall phones: one line of rules text per augment is what fits without a scroll. */
@media(max-height:340px){
  body.touch #reactorDialog .reactorChoice{grid-template-columns:28px 1fr;}
  body.touch #reactorDialog .reactorChoice .reactorIcon{width:28px;height:28px;}
  body.touch #reactorDialog .reactorChoice small{-webkit-line-clamp:1;}
}