/* The room seen from above (classroom/js/plan.js draws it), shared by My Classroom, where it is built, and My Classes,
   where the class is seated in it. The drawing keeps the room's shape (--ar) and is as large as the space and the screen allow. */
.room-wrap { --ar: 1.25; position: relative; width: min(100%, calc((100vh - 250px) * var(--ar))); width: min(100%, calc((100dvh - 250px) * var(--ar))); min-width: min(100%, 320px); aspect-ratio: var(--ar); }
.room, .room-svg, .seat-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.room-svg { display: block; overflow: visible; filter: drop-shadow(0 18px 26px rgba(20,48,44,.25)); }
.room-wall { fill: none; stroke: #143E38; stroke-width: 18; }
.room-grid { fill: none; stroke: rgba(20,62,56,.18); stroke-width: 2; stroke-dasharray: 6 8; opacity: 0; transition: opacity .3s; }
.it { cursor: default; }
.it-hit { fill: transparent; }
.room-pan { display: flex; width: 100%; }
.room-pan > .room-wrap { flex: none; margin-inline: auto; }
@media print { .room-svg { filter: none; } }