/* Size-preserving presentation. Card, board, hand, artwork, title and footer
   geometry stay at the exact production layout. Only summaries use less space. */

/* Full effect popups have room to wrap. This does not affect any art tile. */
body :is(.exact-effects,.draft-hover-effects,.big-key-effects){flex-wrap:wrap}
body :is(.exact-effects,.draft-hover-effects,.big-key-effects) .key-effect{
  box-sizing:border-box;
  max-width:100%;
  white-space:normal;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  flex:1 1 120px;
}
body :is(.exact-effects,.draft-hover-effects,.big-key-effects) .key-effect small{
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* The production footer remains 28px on PC and 20px on mobile. Preserve its
   vertical position, padding height and every numeric font size. */
body.battle-screen-active .game-app .face-tile .face-result{padding-inline:3px;gap:1px}
body.battle-screen-active .game-app .face-tile .face-result .key-effect{
  display:flex;
  flex-wrap:nowrap;
  flex:1 0 auto;
  min-width:0;
  padding-inline:0;
  gap:1px;
  max-width:none;
  white-space:nowrap;
}
body.battle-screen-active .game-app .face-tile .face-result .key-effect :is(.effect-symbol,b){flex:0 0 auto}
body.battle-screen-active .game-app .face-tile .face-result .key-effect small{white-space:nowrap}
/* One or two effects retain the production equal-width, centered slots.
   Denser rows retain their content width and share the remaining space. */
body.battle-screen-active .game-app .face-tile .face-result:not(:has(> .key-effect:nth-child(3))) > .key-effect{flex:1 1 0}
body.battle-screen-active .game-app .face-tile .face-result .key-effect:not(:has(b)) small{display:inline;font-size:10px}

/* A narrow desktop keeps the same 28px footer and numeric fonts. Only the
   supplementary labels wrap inside that existing band; no card or art moves. */
@media (max-width:1100px) and (min-height:601px){
  body.battle-screen-active .game-app .face-tile .face-result:has(> .key-effect:nth-child(3)){padding-inline:0}
  body.battle-screen-active .game-app .face-tile .face-result .key-effect small{
    white-space:normal;
    max-width:28px;
    overflow-wrap:anywhere;
    flex:0 0 auto;
  }
}

/* Keep the production Pick grid tracks and art row. Long passive text shares
   a fixed-height footer row with its symbol instead of adding another row. */
body .draft-card .draft-effects{overflow:visible;gap:3px 6px}
body .draft-card .pick-effect{flex:0 0 auto;max-width:100%;white-space:nowrap}
body .draft-card .pick-effect:has(small):not(:has(b)){
  flex:1 1 0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
}
body .draft-card .pick-effect small{min-width:0;white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip}