/* Home only: display:contents leaves the original desktop layout untouched. */
#desktop-surface { display: contents; }
#room-view-toggle {
    position: fixed;
    right: 12px;
    bottom: calc(44px + env(safe-area-inset-bottom));
    z-index: 60001;
    width: 36px;
    min-width: 36px;
    height: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    color: transparent;
    text-indent: -9999px;
    cursor: pointer;
}
#room-view-toggle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 21px;
    height: 14px;
    transform: translate(-50%, -50%);
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8C4 4 7 2 12 2s8 2 11 6c-3 4-6 6-11 6S4 12 1 8Z' fill='none' stroke='%23111' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='8' r='3' fill='%23111'/%3E%3C/svg%3E");
    image-rendering: pixelated;
}
#room-view-toggle:active { padding: 0; }
#room-view-toggle:active::before {
    transform: translate(calc(-50% + 1px), calc(-50% + 1px));
}
#room-view-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#room-view-dialog {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    overflow: hidden;
    background: transparent;
    color: #eee;
    touch-action: none;
    overscroll-behavior: none;
}
#room-view-dialog::backdrop { background: transparent; }
#room-view-scene {
    position: fixed;
    inset: 0;
    z-index: 61000;
    overflow: hidden;
    background: #080908;
    pointer-events: none;
}
#room-view-scene[hidden] { display: none; }
#room-view-photo {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    transform-origin: 0 0;
    will-change: transform;
}
.room-view-open #desktop-surface,
.room-view-open #common-ui-root {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: var(--room-desktop-width);
    height: var(--room-desktop-height);
    box-sizing: border-box;
    transform-origin: 0 0;
    transform: var(--room-screen-transform);
    clip-path: inset(0 round 1.5% / 2%);
    overflow: hidden;
    pointer-events: none;
    will-change: transform;
}
.room-view-open #desktop-surface {
    z-index: 61001;
    padding-top: 20px;
    background: #008080 url('../images/windows-95-background.jpg') center / cover no-repeat;
    filter: brightness(.9) saturate(.9);
}
.room-view-open #common-ui-root { z-index: 61002; }
.room-view-open #common-ui-root .footer { display: none; }
.room-view-open > #room-view-toggle,
.room-view-open > img { visibility: hidden; }
#room-view-screen-hit {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: zoom-in;
}
#room-view-screen-hit:focus-visible { outline: 5px solid #b6d9ff; outline-offset: -5px; }
@media (max-width: 600px) {
    #room-view-toggle {
        right: 4px;
        bottom: calc(34px + env(safe-area-inset-bottom));
        width: 30px;
        min-width: 30px;
        height: 26px;
        min-height: 26px;
        margin: 0;
        padding: 0;
    }
    #room-view-toggle::before {
        width: 18px;
        height: 12px;
    }
    #room-view-toggle:active { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #room-view-photo, .room-view-open #desktop-surface,
    .room-view-open #common-ui-root { will-change: auto; }
}