/* room.css — 小鹿的房间 (standalone 3D page, /room)
   Two colourways following the main site's theme-mode: night (moon +
   lamps) and day (sunbeam). html.day switches the chrome; room.js
   switches the scene. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  /* identical to the scene's clear color, so the letterbox that appears
     when zoomed out is seamless night */
  background: #101d38;
  font-family: 'Noto Sans SC', 'PingFang SC', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

#room-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  /* Native-resolution rendering: the 8-bit is the voxel geometry
     itself, so wall faces stay smooth and cube edges stay sharp. */
  /* part of the grade: a small saturation/contrast push */
  filter: saturate(1.07) contrast(1.03);
}
#room-canvas.dragging { cursor: grabbing; }
#room-canvas.hovering { cursor: pointer; }

/* ── Cinematic grade — 呓语小镇 split-tone, in two blend layers over
   the canvas: `lighten` lifts only the darks toward deep blue,
   `soft-light` warms the mids and highlights. Below the vignette (5)
   and all chrome (10+). ── */
.room-grade { position: fixed; inset: 0; pointer-events: none; }
.room-grade-shadow {
  z-index: 3;
  background: #16264e;
  mix-blend-mode: lighten;
  opacity: .5;
}
.room-grade-warm {
  z-index: 4;
  background: #ff9a4d;
  mix-blend-mode: soft-light;
  opacity: .28;
}
.day .room-grade-shadow { background: #2c4676; opacity: .3; }
.day .room-grade-warm { opacity: .34; }

/* ── Vignette — the tilt-shift finishing layer: gently darkened
   corners make the diorama read as a photographed miniature. Above
   the canvas (no z-index), below all chrome (z 10+). ── */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse 78% 72% at 50% 46%,
    transparent 58%, rgba(6, 11, 26, 0.34) 100%);
}
.day body::after {
  background: radial-gradient(ellipse 78% 72% at 50% 46%,
    transparent 60%, rgba(30, 48, 84, 0.22) 100%);
}

/* ── Loading ── */
#room-loading {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  background: #101d38;
  z-index: 20;
  transition: opacity .6s ease;
}
#room-loading.done { opacity: 0; pointer-events: none; }
.room-loading-star {
  font-size: 34px; color: #cfe4f6;
  animation: room-star-spin 2.4s linear infinite;
}
.room-loading-text {
  font-size: 13px; color: #708aa5; letter-spacing: 3px;
}
@keyframes room-star-spin {
  0%   { transform: rotate(0deg) scale(1); opacity: .6; }
  50%  { transform: rotate(180deg) scale(1.25); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: .6; }
}

/* ── Chrome ── */
.room-back {
  position: fixed; top: 18px; left: 18px; z-index: 10;
  color: #b5c9dc; text-decoration: none;
  font-size: 13px; letter-spacing: 1px;
  padding: 8px 14px;
  border: 1px solid rgba(164, 196, 232, 0.22);
  border-radius: 999px;
  background: rgba(15, 26, 46, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .15s, color .15s;
}
.room-back:hover { background: rgba(164, 196, 232, 0.16); color: #e4eef8; }

.room-title {
  position: fixed; top: 20px; right: 22px; z-index: 10;
  text-align: right;
  pointer-events: none;
}
.room-title h1 {
  font-family: 'Zen Maru Gothic', 'Noto Sans SC', sans-serif;
  font-size: 18px; font-weight: 500;
  color: #e4eef8; letter-spacing: 2px;
}
.room-title p {
  margin-top: 4px;
  font-size: 11px; color: #708aa5; letter-spacing: 1px;
}

/* ── Hover tooltip ── */
#room-tip {
  position: fixed; z-index: 10;
  left: 0; top: 0;
  padding: 7px 13px;
  font-size: 12.5px; letter-spacing: 1px;
  color: #0f1a2e;
  background: linear-gradient(135deg, #cfe4f6, #aacce8);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 14px)) scale(.9);
  transition: opacity .15s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1);
  white-space: nowrap;
}
#room-tip.show {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 14px)) scale(1);
}
/* 可看不可点 — muted tag for decorative props (no ✦, no pointer) */
#room-tip.plain {
  color: #c9d8ea;
  background: rgba(38, 52, 82, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* ── 显示器录播播放器 — the iframe lives at (0,0) sized 400×200 and a
   CSS matrix() (set per-frame from room.js) maps it onto the
   monitor's projected screen quad. Above canvas/grade/vignette,
   below the chrome. ── */
#monitor-video {
  position: fixed; left: 0; top: 0;
  transform-origin: 0 0;
  z-index: 6;
}
#monitor-video iframe {
  width: 400px; height: 200px;
  border: 0; display: block;
  background: #000;
}
#mv-close, #mv-list {
  position: fixed; z-index: 11;
  width: 26px; height: 26px;
  border: 2px solid #1d2c4a;
  background: #aacce8;
  color: #1d2c4a;
  font-size: 14px; line-height: 1;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(6, 12, 26, 0.45);
}
#mv-close:hover, #mv-list:hover { background: #cfe4f6; }
#mv-list { background: #f6f2e8; }

/* ── 陪伴模式 — lofi study button; in study mode the chrome fades and
   the room becomes the desk companion. ── */
.room-tools {
  position: fixed; right: 22px; bottom: 20px; z-index: 10;
  display: flex; align-items: center; gap: 8px;
}
.room-tools button {
  color: #b5c9dc;
  font-size: 13px; letter-spacing: 1px;
  font-family: inherit;
  padding: 8px 14px;
  border: 1px solid rgba(164, 196, 232, 0.22);
  border-radius: 999px;
  background: rgba(15, 26, 46, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background .15s, color .15s, opacity .5s;
}
#help-btn, #mute-btn {
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
#mute-btn.off { opacity: .5; }
.room-tools button:hover { background: rgba(164, 196, 232, 0.16); color: #e4eef8; }
.day .room-tools button {
  color: #2c4468;
  border-color: rgba(44, 68, 104, 0.28);
  background: rgba(255, 255, 255, 0.55);
}
.day .room-tools button:hover { background: rgba(255, 255, 255, 0.85); color: #17304f; }
.room-back, .room-title { transition: opacity .6s ease; }
.study .room-back, .study .room-title { opacity: 0; pointer-events: none; }
.study .room-tools { opacity: .4; }
.study .room-tools:hover { opacity: 1; }

/* ── Help panel ── */
#room-help {
  position: fixed; inset: 0; z-index: 25;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(6, 12, 26, 0.55);
  opacity: 0;
  transition: opacity .18s ease;
}
#room-help.open { opacity: 1; }
#room-help[hidden] { display: none; }
.rh-card {
  position: relative;
  width: min(460px, 92vw);
  max-height: 84vh; overflow-y: auto;
  padding: 22px 24px 20px;
  background: #101d38;
  border: 3px solid #d8e5f6;
  box-shadow: 8px 8px 0 rgba(6, 12, 26, 0.55);
  color: #cfe0f2;
  transform: scale(.95) translateY(8px);
  transition: transform .2s cubic-bezier(.34, 1.4, .64, 1);
}
#room-help.open .rh-card { transform: none; }
.rh-card h2 {
  font-family: 'Zen Maru Gothic', 'Noto Sans SC', sans-serif;
  font-size: 17px; font-weight: 500; letter-spacing: 2px;
  color: #e4eef8; margin-bottom: 12px;
}
.rh-card h3 {
  font-size: 12px; font-weight: 500; letter-spacing: 2px;
  color: #7fa8d0; margin: 16px 0 8px;
}
.rh-list { list-style: none; }
.rh-list li {
  font-size: 12.5px; line-height: 1.85; letter-spacing: .5px;
  padding-left: 14px; position: relative;
}
.rh-list li::before {
  content: '·'; position: absolute; left: 2px; color: #f3d27a;
}
.rh-list b { color: #f3d27a; font-weight: 500; }
.rh-toggle {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(164, 196, 232, 0.18);
  font-size: 12.5px; letter-spacing: .5px; cursor: pointer;
}
.rh-close {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px;
  border: 2px solid #1d2c4a;
  background: #aacce8;
  color: #1d2c4a;
  font-size: 14px; line-height: 1; cursor: pointer;
  box-shadow: 2px 2px 0 rgba(6, 12, 26, 0.45);
}
.rh-close:hover { background: #cfe4f6; }
.day .rh-card { background: #e8f0fa; color: #2c4468; border-color: #7fa8d0; }
.day .rh-card h2 { color: #17304f; }
.day .rh-card h3 { color: #4a6db0; }
.day .rh-list b { color: #b0842a; }

/* ── OS window (iframe overlay) ──
   Chunky pixel chrome to match the diorama: hard border, hard shadow,
   cream title bar. The room keeps rendering behind the dim scrim. */
#room-window {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: 26px;
  background: rgba(6, 12, 26, 0.5);
  opacity: 0;
  transition: opacity .18s ease;
}
#room-window.open { opacity: 1; }
#room-window[hidden] { display: none; }

.rw-frame {
  width: min(960px, 94vw);
  height: min(660px, 86vh);
  display: flex; flex-direction: column;
  background: #101d38;
  border: 3px solid #d8e5f6;
  box-shadow: 8px 8px 0 rgba(6, 12, 26, 0.55);
  transform: scale(.94) translateY(10px);
  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1);
}
#room-window.open .rw-frame { transform: none; }

.rw-bar {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 6px;
  background: #d8e5f6;
  flex-shrink: 0;
}
.rw-title {
  flex: 1; text-align: center;
  font-size: 12.5px; font-weight: 500; letter-spacing: 2px;
  color: #1d2c4a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rw-btn {
  width: 26px; height: 26px; flex-shrink: 0;
  border: 2px solid #1d2c4a;
  background: #f6f2e8;
  color: #1d2c4a;
  font-size: 14px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 2px 2px 0 rgba(29, 44, 74, 0.4);
}
.rw-btn:hover { background: #fff; }
.rw-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(29, 44, 74, 0.4); }
.rw-btn-close { background: #aacce8; }
.rw-btn-close:hover { background: #cfe4f6; }
/* balances the close button so the title sits truly centred */
.rw-spacer { width: 26px; flex-shrink: 0; }

.rw-body {
  flex: 1; position: relative;
  background: #e1edfa;
}
#rwFrame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
  background: #e1edfa;
  transition: opacity .15s ease;
}
/* While a new page loads, the old document hides and a star spins —
   no flash of the previous window's content. */
#room-window.rw-busy #rwFrame { opacity: 0; }
.rw-loading {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
}
#room-window.rw-busy .rw-loading { display: flex; }
.rw-loading-star {
  font-size: 26px; color: #7fa8d0;
  animation: room-star-spin 2.4s linear infinite;
}

/* ── Day colourway (html.day) — matches the scene's daylight ── */
.day, .day body { background: #b9d4ee; }
.day #room-loading { background: #b9d4ee; }
.day .room-loading-star { color: #4a6db0; }
.day .room-loading-text { color: #4c6488; }
.day .room-back {
  color: #2c4468;
  border-color: rgba(44, 68, 104, 0.28);
  background: rgba(255, 255, 255, 0.55);
}
.day .room-back:hover { background: rgba(255, 255, 255, 0.85); color: #17304f; }
.day .room-title h1 { color: #21395e; }
.day .room-title p { color: #4c6488; }

@media (max-width: 640px) {
  .room-title h1 { font-size: 15px; }
  .room-title p { font-size: 10px; }
  /* phone: the window is a full sheet */
  #room-window { padding: 0; }
  .rw-frame {
    width: 100vw; height: 100dvh;
    border: none; box-shadow: none;
  }
}