/* ==========================================================================
   Shack Stack · Teacher view (3D diorama). Presentation for the read-only scene
   built by teacherview.js. Loads after lofi.css and uses its tokens.
   Rules for this file: only leaves may use opacity/filter/overflow inside the
   preserve-3d chain (stage > room > desk groups), or browsers flatten the 3D.
   ========================================================================== */
.icon-teacher-view { mask-image: url(assets/ui-teacher-view.svg?v=90); -webkit-mask-image: url(assets/ui-teacher-view.svg?v=90); }
body[data-room-theme] { --floor: color-mix(in srgb, var(--room) 66%, #d8c4a0); --wall-a: color-mix(in srgb, var(--ui-accent) 14%, var(--surface)); --wall-b: color-mix(in srgb, var(--ui-accent) 27%, var(--surface)); --wood: color-mix(in srgb, var(--desk-bottom) 62%, #c8a57a); }
body[data-mode=dark] { --floor: color-mix(in srgb, var(--room) 84%, #3a3329); --wall-a: color-mix(in srgb, var(--ui-accent) 12%, #1f1e22); --wall-b: color-mix(in srgb, var(--ui-accent) 22%, #232226); --wood: color-mix(in srgb, var(--desk-bottom) 38%, #46392c); }

/* While the scene is up the live canvas is only hidden, never changed. */
.room.scene-on #canvasWrap { visibility: hidden; }
.scene-lock-note { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-md); background: color-mix(in srgb, var(--ui-accent) 9%, var(--raised)); border: 1px solid color-mix(in srgb, var(--ui-accent) 28%, var(--line)); color: var(--ink); font-size: var(--t-cap); line-height: 1.45; }
#roomControls[inert] { opacity: .45; filter: grayscale(.4); }
body[data-scene] .mode-badge { background: color-mix(in srgb, var(--butter) 40%, var(--raised)); border-color: color-mix(in srgb, var(--butter) 70%, var(--line)); }
#teacherView[aria-pressed=true] { background: var(--raised); color: var(--ink); box-shadow: var(--shadow-2); }
#teacherView[aria-pressed=true] .ui-icon { color: var(--ui-accent); }
#teacherView:disabled { opacity: .45; }

/* ---------- Stage ---------- */
.scene-wrap { position: absolute; z-index: 6; overflow: hidden; perspective: 3400px; perspective-origin: 50% 42%; background-color: color-mix(in srgb, var(--room) 70%, var(--surface)); background-image: radial-gradient(120% 90% at 50% 38%, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 60%), var(--paper); background-size: auto, 240px 240px; }
body[data-mode=dark] .scene-wrap { background-image: radial-gradient(120% 90% at 50% 38%, rgb(255 255 255 / .04), rgb(255 255 255 / 0) 60%); }
.scene-stage { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transform-origin: 0 0; will-change: transform; }
.s-room { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform-origin: 0 0; }
.s-floor { position: absolute; left: 0; top: 0; border-radius: 6px; background-color: var(--floor); background-image: repeating-linear-gradient(90deg, rgb(var(--shadow-warm) / .055) 0 2px, transparent 2px 120px), repeating-linear-gradient(0deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 60px), var(--paper); background-size: auto, auto, 240px 240px; box-shadow: 0 0 0 1.4px rgb(var(--shadow-warm) / .22); }
body[data-mode=dark] .s-floor { box-shadow: 0 0 0 1.4px rgb(255 255 255 / .08); }

/* ---------- Walls ---------- */
.s-wall { position: absolute; box-sizing: border-box; transform-origin: 0 100%; background: linear-gradient(180deg, var(--wall-b), var(--wall-a)); border-bottom: 8px solid color-mix(in srgb, var(--wall-b) 55%, #8a7762); }
.s-wall.front, .s-wall.back { background: linear-gradient(180deg, var(--wall-a), var(--wall-b)); }
.s-cap { position: absolute; left: 0; top: -6px; height: 12px; transform-origin: 0 50%; background: color-mix(in srgb, var(--raised) 78%, var(--wall-a)); border: 1.4px solid rgb(var(--shadow-warm) / .28); border-radius: 3px; box-sizing: border-box; }
.s-board { position: absolute; top: 30px; height: 62px; border-radius: 6px; background: color-mix(in srgb, var(--raised) 94%, var(--wall-a)); border: 5px solid color-mix(in srgb, var(--wood) 80%, #8a7762); box-sizing: border-box; box-shadow: inset 0 0 0 1px rgb(var(--shadow-warm) / .12); }

/* ---------- Furniture ---------- */
.s-desk { position: absolute; transform-style: preserve-3d; transform-origin: 0 0; }
.s-slice { position: absolute; inset: 0; }
.s-shape { position: absolute; inset: 0; border-radius: 10px; }
.s-desk.oval .s-shape, .s-desk.round .s-shape { border-radius: 50%; }
.s-desk.l .s-shape { border-radius: 0; clip-path: polygon(0 0, 48% 0, 48% 52%, 100% 52%, 100% 100%, 0 100%); }
.s-slice.edge .s-shape { background: color-mix(in srgb, var(--wood) 62%, #3e2f20); }
.s-slice.top .s-shape { background: linear-gradient(180deg, rgb(255 255 255 / .36), rgb(255 255 255 / 0) 46%), repeating-linear-gradient(1.5deg, rgb(var(--grain) / var(--grain-a)) 0 1px, transparent 1px 8px), color-mix(in srgb, var(--desk-bottom) 86%, #cdb68f); box-shadow: inset 0 0 0 1.4px rgb(var(--shadow-warm) / .38); }
body[data-mode=dark] .s-slice.top .s-shape { background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / 0) 50%), color-mix(in srgb, var(--desk-bottom) 34%, var(--surface)); }
.s-desk.teacher .s-slice.top .s-shape { background-color: color-mix(in srgb, var(--sky) 16%, color-mix(in srgb, var(--desk-bottom) 60%, var(--surface))); }
.s-shadow { position: absolute; inset: 0; transform: translateZ(.4px); translate: var(--shx, 12px) var(--shy, 14px); }
.s-shadow .s-shape { background: rgb(var(--shadow-warm) / .3); filter: blur(9px); }
body[data-mode=dark] .s-shadow .s-shape { background: rgb(0 0 0 / .5); }
.s-gshadow { position: absolute; transform: translateZ(.4px); border-radius: 50%; background: rgb(var(--shadow-warm) / .26); filter: blur(8px); translate: var(--shx, 12px) var(--shy, 14px); }
.s-post { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.s-post i { position: absolute; transform-origin: 50% 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--wood) 70%, #3a2c1e), var(--wood)); }
.s-post.cp i { background: color-mix(in srgb, var(--wood) 60%, #3a2c1e); }
.s-chair { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.s-seat { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 8px; background: color-mix(in srgb, var(--wood) 72%, var(--surface)); box-shadow: inset 0 0 0 1.2px rgb(var(--shadow-warm) / .28); }
.s-back { position: absolute; left: -17px; top: -13px; width: 34px; height: 30px; border-radius: 7px 7px 2px 2px; background: color-mix(in srgb, var(--wood) 58%, #4a3a2a); transform-origin: 50% 100%; box-shadow: inset 0 0 0 1.2px rgb(var(--shadow-warm) / .3); }
.s-chair.teacher-chair .s-seat { left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 12px; background: color-mix(in srgb, var(--ui-accent) 62%, var(--surface)); }
.s-chair.teacher-chair .s-back { left: -24px; top: -20px; width: 48px; height: 46px; border-radius: 12px 12px 3px 3px; background: color-mix(in srgb, var(--ui-accent) 70%, #2a2018); }

/* ---------- Decorations ---------- */
.s-decal, .s-pedestal { position: absolute; transform-style: preserve-3d; }
.s-decal { transform: translateZ(.7px); }
.s-decal-art { position: absolute; inset: 0; }
.s-decal-art img, .s-pedestal-top .s-decal-art img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.s-pedestal-top { position: absolute; inset: 0; }
body[data-mode=dark] .s-decal-art img, body[data-mode=dark] .s-sprite img { filter: brightness(.84) saturate(.9); }
.s-bb { position: absolute; width: 0; height: 0; transform-origin: 0 0; }
.s-sprite { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); transform-origin: 50% 100%; pointer-events: none; }
.s-sprite img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 3px 4px rgb(var(--shadow-warm) / .16)); user-select: none; }

/* ---------- Student cards: the faces and names stay the stars ---------- */
.s-card { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); transform-origin: 50% 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 92px; min-height: 0; height: auto; padding: 6px 8px 7px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--ink) 9%, var(--seat-bg)); background: var(--seat-bg); color: var(--seat-ink); font: 600 14px/17px var(--font); white-space: nowrap; cursor: pointer; box-shadow: 0 1px 1px rgb(var(--shadow-warm) / .1), 0 7px 16px rgb(var(--shadow-warm) / .2), inset 0 1px 0 rgb(255 255 255 / .75); }
body[data-mode=dark] .s-card { box-shadow: 0 1px 1px rgb(0 0 0 / .5), 0 7px 16px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .06); }
.s-card:hover:not(.s-teacher) { border-color: var(--line-strong); }
.s-card:focus-visible { outline: 2.5px solid var(--ui-accent); outline-offset: 2px; }
.s-portrait { flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: var(--ui-accent); background: linear-gradient(160deg, color-mix(in srgb, var(--ui-accent) 20%, var(--seat-bg)), color-mix(in srgb, var(--ui-accent) 9%, var(--seat-bg))); box-shadow: 0 0 0 1px rgb(var(--shadow-warm) / .13), 0 2px 5px rgb(var(--shadow-warm) / .15); font: 650 19px var(--font); }
.s-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-portrait b { font: inherit; }
.s-portrait.neutral::before { content: ""; width: 58%; height: 58%; background: currentColor; opacity: .5; mask: url(assets/ui-person.svg?v=90) center / contain no-repeat; -webkit-mask: url(assets/ui-person.svg?v=90) center / contain no-repeat; }
.s-name { display: flex; flex-direction: column; align-items: center; text-align: center; }
.s-name span { display: block; }
.s-card.s-marker { min-width: 0; width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--warn-line) 80%, var(--ink)); background: var(--raised); transform: translate(-50%, -50%); font-weight: 700; color: var(--ink); }
.s-card.s-teacher { flex-direction: row; gap: 10px; padding: 8px 14px 8px 8px; cursor: default; font-size: 16px; line-height: 20px; }
.s-card.s-teacher .s-name { align-items: flex-start; text-align: left; white-space: normal; max-width: 160px; }

/* ---------- Interface over the scene ---------- */
.scene-ui { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; align-items: center; gap: 10px; pointer-events: none; z-index: 3; }
.scene-ui > * { pointer-events: auto; }
#sceneBack { min-height: 32px; height: 32px; padding: 0 var(--s3) 0 var(--s2); gap: 6px; font-size: var(--t-cap); font-weight: 600; box-shadow: var(--shadow-2); }
#sceneBack::before { content: ""; width: 16px; height: 16px; background: currentColor; mask: url(assets/ui-chevron.svg?v=90) center / contain no-repeat; -webkit-mask: url(assets/ui-chevron.svg?v=90) center / contain no-repeat; transform: rotate(90deg); }
.scene-caption { padding: 5px 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--raised) 88%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-1); font-size: var(--t-cap); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.scene-tip { position: absolute; z-index: 4; display: grid; gap: 1px; padding: 7px 11px; border-radius: var(--r-md); background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-2); color: var(--ink); font-size: var(--t-body); pointer-events: none; max-width: 260px; }
.scene-tip strong { font-weight: 650; overflow-wrap: anywhere; }
.scene-tip span { font-size: var(--t-cap); color: var(--muted); }
@media (max-width: 700px) { .scene-caption { display: none; } }
@media print { .scene-wrap { display: none !important; } }
@media (forced-colors: active) { .s-card { border-color: CanvasText; } }

/* Overlapping cards: hovering or focusing one lifts it toward the camera and enlarges it so the name is readable. */
.s-card:not(.s-teacher):not(.s-marker) { transition: scale .14s var(--ease-out), translate .14s var(--ease-out), box-shadow .14s var(--ease-out); }
.s-card:not(.s-teacher):hover, .s-card:not(.s-teacher):focus-visible { scale: 1.28; translate: 0 0 160px; box-shadow: 0 2px 3px rgb(var(--shadow-warm) / .16), 0 14px 26px rgb(var(--shadow-warm) / .28), inset 0 1px 0 rgb(255 255 255 / .75); }

.scene-hint { position: absolute; left: 14px; bottom: 10px; z-index: 3; margin: 0; padding: 4px 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--raised) 82%, transparent); border: 1px solid var(--line); font-size: var(--t-cap); color: var(--muted); pointer-events: none; }
@media (max-width: 700px) { .scene-hint { display: none; } }