/* image-zoom.css */
/* CLASSROOM SHOWDOWN — the enlarged question picture (image-zoom.js), on
   the board and on the phones. The layer sits above everything on the
   page: the board's zoomed stage is z-index 5-ish, the phone's sheets 80,
   the trade sheet 90. */
.iz-zoomable{cursor:zoom-in}
.iz-layer{
  position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:18px;background:rgba(9,10,32,.9);backdrop-filter:blur(6px);cursor:zoom-out;
  animation:iz-in .16s ease-out;
}
.iz-layer[hidden]{display:none}
.iz-pic{
  max-width:min(96vw,1800px);max-height:88vh;width:auto;height:auto;object-fit:contain;
  border-radius:18px;border:4px solid #fff;box-shadow:0 30px 80px rgba(0,0,0,.6);background:#fff;
}
.iz-hint{color:#fff;font-family:var(--sans,system-ui,sans-serif);font-size:15px;font-weight:800;opacity:.8;letter-spacing:.02em}
body.iz-open{overflow:hidden}
@keyframes iz-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.iz-layer{animation:none}}