/* Give the selected card breathing room in near-square tablet windows.
   Both ramps meet the existing 46% position at their ends, avoiding a jump
   when the window crosses the former 900px-height threshold. */
@media (min-width: 701px) and (max-width: 1200px) {
  body.expanded .card {
    --tablet-top-clearance: min(
      clamp(0px, calc(37.5vh - 270px), 18px),
      clamp(0px, calc(122.4px - 13.6vh), 18px),
      clamp(0px, calc(240px - 20vw), 30px)
    );
    top: calc(46% + var(--tablet-top-clearance));
  }
}

/* The additional card size is capped by both available height and width.
   Every gain becomes zero at the wide-screen or short-screen edge, so the
   original desktop layout is recovered continuously. */
@media (min-width: 701px) and (max-width: 1200px) and (min-height: 761px) {
  body.expanded .card {
    --tablet-width-gain: min(
      clamp(0px, calc(20vh - 153.6px), 50px),
      clamp(0px, calc(420px - 35vw), 50px)
    );
    --tablet-height-gain: min(
      clamp(0px, calc(32vh - 245.76px), 100px),
      clamp(0px, calc(900px - 75vw), 100px)
    );
    width: min(265px, max(190px, 25vw), calc(max(165px, 21vw) + var(--tablet-width-gain)));
    height: min(clamp(360px, 47.5vw, 500px), calc(clamp(240px, 44vh, 425px) + var(--tablet-height-gain)));
  }

  body.expanded .deck-controls {
    bottom: min(
      clamp(0px, calc(23.4vh - 179.7px), 84px),
      clamp(0px, calc(840px - 70vw), 84px)
    );
  }
}