/* Original illustrated room, with matching object interiors. */
#styleSwitch { border:1px solid var(--brd);background:var(--paper);color:var(--ink-blue);border-radius:20px;padding:9px 13px;font:600 11px 'Segoe UI','Microsoft YaHei',sans-serif;cursor:pointer;white-space:nowrap; }
.skin-control { display:none;align-items:center;gap:6px;font-size:10px;color:var(--muted);white-space:nowrap; }
[data-style="room"] .skin-control { display:flex; }
#skinSelect { border:1px solid var(--brd);border-radius:16px;background:var(--paper);color:var(--ink-blue);padding:8px;font:600 11px 'Segoe UI','Microsoft YaHei',sans-serif;cursor:pointer; }
.interactive-room { display:none; }
::view-transition-old(root),::view-transition-new(root) { animation-duration:480ms;animation-timing-function:cubic-bezier(.22,.75,.2,1); }
@keyframes room-open { from { opacity:0;transform:translateY(18px) scale(.97); } to { opacity:1;transform:none; } }
[data-style="room"] { --bg-0:#e9edff;--bg-1:#e3e7fa;--paper:#f7f8ff;--txt:#354366;--txt-dim:#566485;--muted:#7786a7;--ink-blue:#626fb0;--brd:#cbd3ef;--line-blue:#b9c6e8; }
[data-style="room"][data-theme="night"] { --bg-0:#22273d;--bg-1:#2b314c;--paper:#30374e;--txt:#e2e9ff;--txt-dim:#bac7e7;--muted:#9aa9ce;--ink-blue:#b1c2ff;--brd:#4b587e;--line-blue:#536491; }
[data-style="room"] body { background:var(--bg-0); }
[data-style="room"] #mascot { display:none!important; }
[data-style="room"] #menuView > :not(.interactive-room) { display:none!important; }
[data-style="room"] .interactive-room { display:block;position:relative;margin:18px 0 30px;border-radius:23px;overflow:hidden;box-shadow:0 20px 65px #15245135;aspect-ratio:16/9;isolation:isolate; }
.interactive-room > img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.interactive-room > img { transition:opacity .85s cubic-bezier(.4,0,.2,1); }
.interactive-room::after { content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 15% 43%,#e9e9ff55,transparent 72%);opacity:0;z-index:3; }
.interactive-room.scene-shifting::after { animation:room-light-breathe 1.25s ease-in-out; }
.interactive-room.scene-shifting .room-hotspot { pointer-events:none; }
.interactive-room.scene-shifting .room-hotspot span { opacity:0; }
@keyframes room-light-breathe { 0%,100% { opacity:0; } 40%,60% { opacity:.85; } }
[data-style="room"] body,[data-style="room"] .topbar { transition:background-color .85s ease,color .85s ease; }
.interactive-room > img { opacity:0; }
html:not([data-theme="night"])[data-expression="soft"] .interactive-room .room-day.expression-soft,html:not([data-theme="night"])[data-expression="bright"] .interactive-room .room-day.expression-bright { opacity:1; }
[data-theme="night"] .interactive-room .room-day { opacity:0; }
[data-theme="night"][data-expression="soft"] .interactive-room .room-night.expression-soft,[data-theme="night"][data-expression="bright"] .interactive-room .room-night.expression-bright { opacity:1; }
html:not([data-theme="night"])[data-expression="classic"] .interactive-room .room-day.expression-classic { opacity:1; }
[data-theme="night"][data-expression="classic"] .interactive-room .room-day.expression-classic { opacity:0; }
[data-theme="night"][data-expression="classic"] .interactive-room .room-night.expression-classic { opacity:1; }
.room-welcome { position:absolute;left:33%;top:3%;padding:10px 18px;border-radius:17px;background:#f1f3ffdd;color:#364469;box-shadow:0 4px 22px #1a284933;pointer-events:none;text-align:center; }
.room-welcome b { font:600 18px 'Trebuchet MS','Segoe UI',sans-serif; }
.room-welcome small { display:block;margin-top:4px;font-size:10px; }
.room-hotspot { position:absolute;background:transparent;border:2px solid transparent;border-radius:18px;color:#354366;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s; }
.room-hotspot span { position:absolute;left:50%;bottom:10%;transform:translateX(-50%);background:#f7f8ffef;padding:7px 12px;border-radius:14px;font:600 12px 'Segoe UI','Microsoft YaHei',sans-serif;white-space:nowrap;box-shadow:0 3px 15px #1b234445;opacity:.92; }
.room-hotspot:hover,.room-hotspot:focus-visible { background:#c5d6ff22;border-color:#e9f0ff;box-shadow:0 0 22px #b4c8ff88;outline:0; }
.room-hotspot:hover span,.room-hotspot:focus-visible span { background:#fff;transform:translateX(-50%) translateY(-5px); }
[data-style="room"] .section-view { padding:24px 30px 35px;margin-top:28px;border:1px solid var(--brd);border-radius:15px;background:var(--paper);box-shadow:0 20px 60px #14204322; }
[data-style="room"] .section-view.in-right { animation:room-open .45s both;transform-origin:var(--portal-x,50%) var(--portal-y,50%); }
[data-style="room"] .section-intro { padding-top:22px; }
[data-style="room"] .section-intro h3 { font-family:'Trebuchet MS','KaiTi',serif; }
/* Computer: bezel, webcam, screen and keyboard deck. */
[data-style="room"] #view-cinema { border:12px solid #30364c;border-top-width:27px;border-bottom-width:34px;background:var(--bg-0);position:relative;border-radius:20px;box-shadow:0 10px 0 #6b7390,0 23px 0 #424a65,0 33px 38px #15203a33;padding:20px 26px 30px; }
[data-style="room"] #view-cinema::before { content:'';position:absolute;top:-18px;left:50%;width:7px;height:7px;border-radius:50%;background:#8792af;box-shadow:0 0 0 3px #22283b; }
[data-style="room"] #view-cinema::after { content:'SALAFM  •  CINEMA DESKTOP';position:absolute;bottom:-25px;left:0;right:0;text-align:center;color:#c4cee3;font:10px 'Segoe UI',sans-serif;letter-spacing:2px; }
[data-style="room"] #view-cinema .vcard { border-radius:7px; }
[data-style="room"] #view-cinema .room-cover { height:170px;background:linear-gradient(135deg,#485888,#26344f);border-radius:8px; }
[data-style="room"] #view-cinema .room-cover > img,[data-style="room"] #view-cinema .cinema-ticket { display:none; }
[data-style="room"] #view-cinema .room-cover::after { display:none; }
[data-style="room"] #view-cinema .ch-txt { inset:18px 25px auto; padding:0; }
[data-style="room"] #view-cinema .ch-txt b { font:500 25px 'Segoe UI','Microsoft YaHei',sans-serif; }
/* Books and diary: paper leaves, stitched gutter and real cover edges. */
[data-style="room"] :is(#view-log,#view-fav) { background:linear-gradient(90deg,#f8f2e5 0%,#fffaf0 47%,#e0d5c0 49.7%,#fff9ee 51%,#f7f0e1 100%);color:#5c534e;border:8px solid #657298;border-left-width:17px;border-radius:8px 18px 18px 8px;box-shadow:7px 7px 0 #ece7dc,10px 10px 0 #74809e,0 22px 45px #18264233;--txt:#5c534e;--txt-dim:#73655b;--paper:#fffaf0;--muted:#97887a;--brd:#e4d9c6;--ink-blue:#6f789d;--bg-0:#f7f0e3; }
[data-style="room"] #view-log .post { border-radius:2px;box-shadow:none;background:repeating-linear-gradient(#fffaf0 0px,#fffaf0 31px,#e8dfcd 32px); }
[data-style="room"] #view-fav .card { background:transparent;border:0;box-shadow:none; }
[data-style="room"] #view-fav .fav-item { border-radius:3px;box-shadow:4px 4px 0 #ded4c4; }
[data-style="room"] :is(#view-log,#view-fav) .section-intro::after { content:'✧'; }
/* Bulletin board, album, sealed letter and little note. */
[data-style="room"] #view-notice { background:#c4a78c;border:13px solid #7d665b;--paper:#fff8e9;--txt:#5f4e43;--txt-dim:#705c50;--brd:#d9c4a9;--ink-blue:#8e6257;--muted:#8a725e; }
[data-style="room"] #view-notice .page-bar,[data-style="room"] #view-notice .section-intro { background:#fff5e9;padding:18px;border-radius:4px; }
[data-style="room"] #view-gallery { border:9px solid #7785ad;border-left:24px solid #5e6c95;background:var(--bg-0); }
[data-style="room"] #view-gallery .gal { padding:18px;border-left:2px dashed var(--brd); }
[data-style="room"] #view-guest { border:8px solid #a0aaca;background:linear-gradient(145deg,var(--paper) 49%,var(--bg-1) 50%); }
[data-style="room"] #view-note { max-width:860px;margin-left:auto;margin-right:auto;transform:rotate(-.5deg);background:#fff3cc;--paper:#fff7df;--txt:#685742;--txt-dim:#7b654f;--muted:#9b8467;--brd:#dfcfa5;--ink-blue:#997b59; }
[data-style="room"] #view-about { background:var(--paper);border-top:20px solid #7d8abb; }
@media(max-width:780px),((hover:none) and (pointer:coarse) and (max-width:1100px)) {
  #styleSwitch { padding:7px 10px;font-size:10px;margin-left:auto; }
  [data-style="room"] .interactive-room { aspect-ratio:16/9;overflow:visible;border-radius:14px; }
  .interactive-room > img { object-fit:cover;border-radius:14px; }
  .room-welcome { left:30%;top:3%;padding:7px 9px; }
  .room-welcome b { font-size:13px; }.room-welcome small { font-size:8px; }
  .room-hotspot span { font-size:9px;padding:5px 6px;bottom:0; }
  [data-style="room"] .section-view { padding:12px 13px 24px;margin-top:18px; }
  [data-style="room"] #view-cinema { padding:12px;border-width:7px;border-top-width:22px;border-bottom-width:28px; }
  [data-style="room"] #view-cinema::before { top:-15px; }
  [data-style="room"] #view-cinema::after { bottom:-21px;font-size:8px; }
  [data-style="room"] :is(#view-log,#view-fav) { background:#fff9ed;border-width:6px;border-left-width:10px; }
  [data-style="room"] #view-notice { border-width:7px; }
  [data-style="room"] #view-gallery { border-width:6px;border-left-width:12px; }
}
@media(prefers-reduced-motion:reduce) { ::view-transition-old(root),::view-transition-new(root) { animation:none; }.interactive-room > img,.room-hotspot,.room-hotspot span { transition:none; }[data-style="room"] .section-view.in-right { animation:none; } }

/* B is a standalone, full-window room. Controls float above the scene. */
[data-style="room"] :is(footer,.aurora,#bg,.mascot-wrap,.dev-badge) { display:none!important; }
[data-style="room"] body:has(#menuView.is-on) #player { display:none!important; }
[data-style="room"] body { margin:0;padding:0; }
[data-style="room"] main.wrap { max-width:none;width:100%;margin:0;padding:0; }
[data-style="room"] header.topbar { position:fixed;inset:12px 12px auto auto;width:auto;border:0;border-radius:22px;background:#30384ac4;backdrop-filter:blur(14px);box-shadow:0 4px 20px #16223a25;z-index:100; }
[data-style="room"] .topbar-in { min-height:0;max-width:none;margin:0;padding:7px;gap:7px;flex-wrap:wrap; }
[data-style="room"] .topbar-in :is(.brand,nav.menu,#memberBtn,#loginBtn) { display:none; }
[data-style="room"] .topbar-in #themeBtn { width:32px;height:32px; }
[data-style="room"] #styleSwitch,[data-style="room"] #skinSelect { font-size:11px;padding:7px 10px; }
[data-style="room"] .skin-control { color:#d4def6; }
[data-style="room"] #menuView { width:100%;height:100svh;overflow-x:auto;overflow-y:hidden;scrollbar-width:none; }
[data-style="room"] #menuView::-webkit-scrollbar { display:none; }
[data-style="room"] .interactive-room { width:max(100vw,177.6833svh);height:auto;min-height:100svh;aspect-ratio:1672/941;margin:0;border-radius:0;box-shadow:none;overflow:hidden; }
[data-style="room"] .interactive-room>img { object-fit:cover;border-radius:0; }
[data-style="room"] .room-welcome { display:none; }
[data-style="room"] .room-hotspot span { opacity:0;transition:opacity .2s,transform .2s; }
[data-style="room"] .room-hotspot:hover span,[data-style="room"] .room-hotspot:focus-visible span { opacity:1; }
[data-style="room"] .section-view { width:calc(100% - 64px);max-width:1280px;margin:86px auto 50px; }
[data-style="room"] #player { opacity:.3;transform:scale(.85);transform-origin:bottom left;transition:opacity .2s; }
[data-style="room"] #player:hover,[data-style="room"] #player:focus-within { opacity:1; }
@media(max-width:780px),((hover:none) and (pointer:coarse) and (max-width:1100px)) {
  [data-style="room"] header.topbar { inset:8px 8px auto 8px; }
  [data-style="room"] .topbar-in { justify-content:center; }
  [data-style="room"] .section-view { width:calc(100% - 24px);margin:80px auto 35px; }
  [data-style="room"] .room-hotspot span { opacity:1; }
  [data-style="room"] #menuView::after { content:'← 左右滑动，探索房间 →';position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#30384ad9;color:#eef1ff;padding:9px 15px;border-radius:20px;font-size:11px;pointer-events:none; }
}

.room-hotspot,.room-hotspot:hover,.room-hotspot:focus-visible { border:0!important;background:transparent!important;box-shadow:none!important;outline:0; }
.room-hotspot:focus-visible span { text-decoration:underline;text-underline-offset:4px; }
.xixi-actor { display:none;position:absolute;left:28%;top:0;width:44%;aspect-ratio:1;z-index:2;pointer-events:none;transition:filter .8s ease; }
.xixi-body { position:absolute;inset:0;width:100%;height:100%;object-fit:contain; }
.xixi-arm { position:absolute;left:-10%;top:57%;width:48%;height:auto;transform-origin:90% 50%;transform:rotate(-65deg); }
.room-lamp-control { display:none;position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none; }
[data-expression="soft"] .room-lamp-control { display:none; }
.object-transition .opening-book i { animation-duration:.32s; }
.object-transition .opening-book i:nth-child(2) { animation-delay:.04s; }.object-transition .opening-book i:nth-child(3) { animation-delay:.08s; }
[data-expression="soft"] .xixi-actor { display:none; }
[data-theme="night"] .xixi-actor { filter:brightness(.88) saturate(.85); }
.interactive-room>.room-foreground { z-index:3;clip-path:inset(71% 0 0 0);pointer-events:none; }
.room-hotspot { z-index:4; }
[data-expression="soft"] .interactive-room.scene-shifting::after { animation:none; }
.scene-curtain { position:absolute;inset:0;z-index:10;pointer-events:none;overflow:hidden; }
.scene-curtain i { position:absolute;top:0;bottom:0;width:50.2%;background:repeating-linear-gradient(90deg,#414a6b,#56617e 5%,#343d59 10%);box-shadow:0 0 35px #121a3350; }
.scene-curtain i:first-child { left:0;animation:curtain-left 1.8s cubic-bezier(.45,0,.2,1) both; }
.scene-curtain i:last-child { right:0;animation:curtain-right 1.8s cubic-bezier(.45,0,.2,1) both; }
@keyframes curtain-left { 0%,100% { transform:translateX(-101%); } 28%,65% { transform:translateX(0); } }
@keyframes curtain-right { 0%,100% { transform:translateX(101%); } 28%,65% { transform:translateX(0); } }
.object-transition { position:fixed;inset:0;z-index:9999;display:grid;place-items:center;pointer-events:none;perspective:1400px;background:#19243c35;backdrop-filter:blur(3px); }
.opening-book { width:min(520px,80vw);height:min(350px,54vw);position:relative;transform-style:preserve-3d;background:#fff8e8;border:8px solid #68759c;border-radius:5px 15px 15px 5px;box-shadow:8px 9px 0 #ddd3c1,0 24px 70px #0b163d66; }
.opening-book::after { content:'SalaFM';position:absolute;inset:35% 15%;color:#766756;font:24px 'Trebuchet MS',sans-serif;text-align:center; }
.opening-book i { position:absolute;inset:0;transform-origin:left center;backface-visibility:hidden;z-index:2;background:repeating-linear-gradient(#fff8e8 0 28px,#ddd5c4 29px 30px);border-right:1px solid #d4c7af;animation:leaf-turn .7s ease-in-out both; }
.opening-book i:nth-child(2) { animation-delay:.12s; }.opening-book i:nth-child(3) { animation-delay:.24s;background:#68759c; }
@keyframes leaf-turn { from { transform:rotateY(0); } to { transform:rotateY(-165deg); } }
.opening-monitor { width:min(760px,85vw);height:min(440px,55vw);background:linear-gradient(140deg,#697ba9,#303d62);border:14px solid #30374d;border-radius:18px;box-shadow:0 12px 0 #7883a3,0 25px 50px #0c173b70;display:grid;place-items:center;color:#e5ecff;font:24px 'Trebuchet MS',sans-serif; }
@media(prefers-reduced-motion:reduce) { .scene-curtain,.object-transition { display:none; } }



.interactive-room.scene-shifting > img { transition:none; }
.interactive-room.scene-shifting::after { animation:none; }

/* Fit the complete room within either a narrow preview panel or a wide screen. */
[data-style="room"] #menuView { display:none;overflow:hidden;background:radial-gradient(ellipse at center,#dce4ef,#afbcd1); }
[data-style="room"] #menuView.is-on { display:flex;align-items:center;justify-content:center; }
[data-style="room"][data-theme="night"] #menuView { background:radial-gradient(ellipse at center,#303b60,#141b30); }
[data-style="room"] .interactive-room { flex:none;width:min(100%,177.6833svh);height:auto;min-height:0;aspect-ratio:1672/941; }
[data-style="room"] #menuView::after { display:none; }

[data-style="room"] #menuView > :is(.room-atmosphere,.room-quick-links) { display:flex!important; }
[data-style="room"] #menuView.is-on { flex-direction:column;gap:22px;padding:80px 0 24px;box-sizing:border-box;position:relative;background:radial-gradient(circle at 18% 25%,#ffffff70 0,transparent 27%),radial-gradient(circle at 82% 75%,#c6c9ef 0,transparent 35%),linear-gradient(150deg,#d7e4ef,#becadc); }
[data-style="room"][data-theme="night"] #menuView.is-on { background:radial-gradient(circle at 15% 20%,#64769e40,transparent 30%),radial-gradient(circle at 85% 80%,#b4957530,transparent 35%),linear-gradient(150deg,#1b2540,#313b59); }
[data-style="room"] .interactive-room { width:min(100%,calc((100svh - 240px)*1.776833));box-shadow:0 12px 55px #101b3938; }
.room-atmosphere { flex-direction:column;align-items:center;flex:none;color:#485777;text-align:center;padding:0 18px; }
.room-atmosphere span { font-size:18px;letter-spacing:3px; }
.room-atmosphere p { margin:8px 0 0;font-size:12px;opacity:.75; }
[data-theme="night"] .room-atmosphere { color:#d7def2; }
.room-quick-links { flex:none;flex-wrap:wrap;justify-content:center;gap:8px;max-width:1000px;padding:0 16px; }
.room-quick-links button { min-height:44px;padding:10px 15px;border:1px solid #7183a12b;border-radius:20px;background:#ffffff50;color:#485777;cursor:pointer;font:inherit;font-size:12px; }
[data-theme="night"] .room-quick-links button { background:#ffffff09;border-color:#a9bbdf25;color:#d7def2; }
.room-quick-links button:hover { background:#8198bd35; }
@media(max-width:600px) {
 [data-style="room"] #menuView.is-on { min-height:100svh;height:auto;padding:100px 0 28px;gap:24px; }
 [data-style="room"] .interactive-room { width:100%; }
 [data-style="room"] .room-hotspot span { opacity:0;font-size:10px; }
 [data-style="room"] .room-hotspot:focus-visible span { opacity:1; }
 [data-style="room"] .room-quick-links { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:440px;box-sizing:border-box; }
 .room-quick-links button { padding:10px 5px;font-size:11px;border-radius:14px; }
 [data-style="room"] .topbar-in #themeBtn { width:44px;height:44px; }
 [data-style="room"] #skinSelect,[data-style="room"] #styleSwitch { min-height:40px; }
 [data-style="room"] .section-view { margin-top:110px; }
}
@media(min-width:601px) and (max-height:500px) {
 [data-style="room"] #menuView.is-on { padding:60px 0 12px;gap:8px; }
 .room-atmosphere p { display:none; }
 [data-style="room"] .interactive-room { width:min(100%,calc((100svh - 160px)*1.776833)); }
}
html:not([data-style="room"]) :is(.room-atmosphere,.room-quick-links) { display:none; }

.room-landscape-button { display:none;min-height:44px;margin-top:12px;padding:8px 18px;border:1px solid #8b9cb855;border-radius:22px;background:#ffffff18;color:inherit;font:inherit;font-size:12px;cursor:pointer; }
.room-orientation-hint { min-height:0;max-width:300px; }
@media(pointer:coarse) { .room-landscape-button { display:block; } }
@media(orientation:landscape) and (pointer:coarse) {
 [data-style="room"] #menuView.is-on { padding:65px 0 12px;gap:10px; }
 [data-style="room"] .room-atmosphere { display:none!important; }
 [data-style="room"] .interactive-room { width:min(100%,calc((100svh - 140px)*1.776833)); }
 .room-quick-links { flex-wrap:nowrap;overflow-x:auto;max-width:100%;box-sizing:border-box;justify-content:flex-start; }
 .room-quick-links button { flex:none; }
}

@media(orientation:portrait) {
 html.room-landscape-fallback[data-style="room"] { overflow:hidden; }
 .room-landscape-fallback[data-style="room"] body { position:fixed;left:100vw;top:0;width:100dvh;height:100dvw;transform:rotate(90deg);transform-origin:0 0;overflow:auto; }
 .room-landscape-fallback[data-style="room"] #menuView.is-on { width:100%;height:100dvw;min-height:0;padding:66px 0 12px;gap:10px; }
 .room-landscape-fallback[data-style="room"] #menuView>.room-atmosphere { display:none!important; }
 .room-landscape-fallback[data-style="room"] .interactive-room { width:min(100%,calc((100dvw - 140px)*1.776833)); }
 .room-landscape-fallback[data-style="room"] .room-quick-links { display:flex!important;flex-wrap:nowrap;max-width:100%;width:auto;overflow-x:auto;justify-content:flex-start; }
 .room-landscape-fallback[data-style="room"] .room-quick-links button { flex:none; }
 .room-landscape-fallback[data-style="room"] header.topbar { inset:8px 8px auto auto; }
}