.room { position: relative; width: 100%; aspect-ratio: 25 / 9; overflow: hidden; background: #c3aa81; container-type: size; }
#scenery { position: absolute; inset: 0; }
.room-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 58%; }
#motions { position: absolute; inset: 0; z-index: 1; }
/* Preserve the original square. Headroom starts near source y=.28; crop the
   table's lower edge beyond the room, never reveal its transparent underside.
   The room is always 25:9 (25% less height than the V2 crop). Its width sets the height;
   vertical viewport changes cannot shrink it. Headroom scales with width too. */
.motion-surface { --motion-size: min(150cqw, 182cqh); position: absolute; width: var(--motion-size); height: var(--motion-size); left: 50%; top: calc(.833333cqw - var(--motion-size) * .28); transform: translateX(-50%); }
.motion-surface > img, .motion-surface > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.room-caption { position: absolute; top: 7px; right: 12px; max-width: 42%; color: #fff6de; text-shadow: 0 1px 5px #48351d; font-size: 10px; line-height: 1.5; letter-spacing: .5px; z-index: 2; }
.loading { position: absolute; inset: 0; z-index: 5; background: #f3ecdf; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 24px; text-align: center; }
.loading-mark { color: #8e7150; border: 1px solid #bfa98b; border-radius: 50%; padding: 12px 17px; font-family: serif; font-size: 28px; }
.loading p { color: #857155; font-size: 13px; line-height: 1.8; word-break: keep-all; }
/* 3.33.0 · a clip with its own background (the café arrival) fills the whole room. */
.motion-surface[data-fill="true"] { inset: 0; width: 100%; height: 100%; top: 0; left: 0; transform: none; }
.motion-surface[data-fill="true"] > img, .motion-surface[data-fill="true"] > canvas { object-fit: cover; object-position: 50% 45%; }

/* 3.50.0 · plain café videos sit where the canvas used to. */
.motion-surface > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; pointer-events: none; }

/* 3.54.0 · the middle part of a two-part reading scene. */
.scene-overlay { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgb(60 40 32 / .38); animation: overlay-in .35s ease-out both; cursor: pointer; }
.scene-overlay[hidden] { display: none; }
.scene-overlay-stage { position: relative; width: min(86vw, 420px); aspect-ratio: 1 / 1; }
.scene-overlay-stage .motion-surface { position: absolute; inset: 0; width: 100%; height: 100%; left: 0; top: 0; transform: none; }
.scene-overlay-hint { margin: 0; color: #fff; font-size: 14px; opacity: .85; text-shadow: 0 1px 4px rgb(0 0 0 / .4); }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }