/* Không gian Chốn Riêng: phòng 2.5D (index.html) và diorama cả quán (so-do.html). Chỉ dùng token của shared/.
   Màn dạng ứng dụng (html.is-app, .cr-app 100dvh): cảnh phủ kín, chữ và nút nằm trên dải tối mờ ở đáy. */

.room-page, .map-page { background: var(--cr-ink-0); color: var(--cr-paper); isolation: isolate; }

/* ---------- Cảnh ---------- */
.room, .map { position: absolute; inset: 0; overflow: hidden; background: var(--cr-ink-0); }
.room__img, .map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room .lamp-room__canvas, .map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.room.has-lamp-room .room__img { visibility: hidden; }
.room.is-lamp-hover { cursor: pointer; }
/* chạm đèn liền hai lần không phóng cả trang trên iPhone */
.room { touch-action: manipulation; }
/* Dải tối đầu và đáy để chữ đọc được trên ảnh (không chuyển động, không làm mờ). Riêng khối chữ đầu màn phòng có thêm
   lớp tối bám theo chiều cao chữ (.room-top::before) để chữ không bao giờ nằm trên đèn lồng. */
.room__shade, .map__shade {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(to bottom, rgb(10 9 8 / .7) 0, rgb(10 9 8 / .3) 24%, rgb(10 9 8 / 0) 36%),
    linear-gradient(to top, rgb(10 9 8 / .88) 0, rgb(10 9 8 / .5) 17%, rgb(10 9 8 / 0) 30%);
}
/* Bố cục cột bên: từ 900px nằm ngang, và điện thoại xoay ngang (xem khối "Điện thoại xoay ngang" dưới; trang cả quán có
   lớp tối riêng khi chưa tới 900px nên không đổi). */
@media (min-width: 900px) and (orientation: landscape), (min-aspect-ratio: 21/20) and (max-height: 500px) {
  /* thêm một vùng tối ở góc đáy phía cột chữ cho câu hướng dẫn và công tắc (ghế lười sáng ngay dưới) */
  .room__shade, .map__shade {
    background:
      linear-gradient(to bottom, rgb(10 9 8 / .7) 0, rgb(10 9 8 / 0) 110px),
      radial-gradient(ellipse 52% 36% at 0 100%, rgb(10 9 8 / .72) 0, rgb(10 9 8 / .45) 55%, rgb(10 9 8 / 0) 100%),
      linear-gradient(to right, rgb(10 9 8 / .84) 0, rgb(10 9 8 / .62) 30%, rgb(10 9 8 / .3) 40%, rgb(10 9 8 / 0) 52%);
  }
  /* Góc của khách nằm nửa trái ảnh: cột chữ sang phải. */
  .is-flip .room__shade {
    background:
      linear-gradient(to bottom, rgb(10 9 8 / .7) 0, rgb(10 9 8 / 0) 110px),
      radial-gradient(ellipse 52% 36% at 100% 100%, rgb(10 9 8 / .72) 0, rgb(10 9 8 / .45) 55%, rgb(10 9 8 / 0) 100%),
      linear-gradient(to left, rgb(10 9 8 / .84) 0, rgb(10 9 8 / .62) 30%, rgb(10 9 8 / .3) 40%, rgb(10 9 8 / 0) 52%);
  }
}

/* Bản tĩnh (máy yếu, không WebGL): đồ vật đặt bằng HTML, quầng đèn CSS ở góc của khách. */
.room__still { position: absolute; inset: 0; pointer-events: none; }
.room__obj { position: absolute; left: 0; top: 0; display: block; }
.room__obj svg { display: block; width: 100%; height: auto; }
.room__pool {
  position: absolute; left: 0; top: 0; width: 260px; height: 200px; margin: -70px 0 0 -130px;
  background: var(--cr-pool); mix-blend-mode: screen;
}

/* ---------- Đầu màn: lối về, chi nhánh, tên góc ----------
   Trên điện thoại ảnh dọc phủ kín chiều cao, góc của khách nằm khoảng giữa màn: chữ dồn lên phần trần nhà (ít quan
   trọng), nút dồn xuống đáy, để chính giữa trống cho bàn và ngọn đèn của khách. */
.room-top { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: grid; gap: var(--sp-2); }
/* --cr-ink .82 phủ hết khối chữ và thêm 12px, nhạt dần về 0 trong 88px tiếp theo (tổng 100px dưới chữ cuối,
   trùng HEAD_SHADE trong phong.js: đèn lồng nằm trong vùng này bị nén). */
.room-top::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 -100px 0; pointer-events: none;
  background: linear-gradient(to bottom, rgb(15 14 12 / .82) 0, rgb(15 14 12 / .82) calc(100% - 88px), rgb(15 14 12 / 0) 100%);
}
.room-top__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.room-top__back {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding-right: var(--sp-3);
  font: 500 var(--fs-small)/1.2 var(--font-body); color: var(--cr-paper);
}
.room-top__back::before { content: ""; width: 9px; height: 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: 2px; }
.room-top__branch { display: inline-flex; gap: var(--sp-2); }
.room-top__branch .chip { position: relative; min-height: 40px; padding: .4em .95em; font-size: .875rem; background: rgb(15 14 12 / .55); }
.room-top__branch .chip[aria-pressed="true"] { background: var(--cr-lamp); color: var(--cr-lamp-ink); }
.room-top__branch .chip::before { content: ""; position: absolute; inset: -4px -2px; }
.room-top__head { display: grid; gap: var(--sp-1); max-width: 30rem; }
.room-title { font-size: clamp(2.4rem, 11vw, 4.5rem); line-height: 1; }
.room-title__lead { display: block; font: 400 italic var(--fs-whisper)/1.2 var(--font-whisper); color: var(--cr-muted); letter-spacing: -.01em; }
/* Tên khách cùng màu --you-1 như ở phiếu, trang, thẻ; lúc chưa bật đèn chỉ tối bớt (không đổi sang màu xám). */
.room-title .t-you { display: inline-block; color: var(--you-name-dim, var(--you-1)); } /* --you-name-dim đặt trong phong.js */
.room-title .t-you.is-lit { color: var(--you-1); text-shadow: 0 0 18px rgb(242 193 78 / .28); }
/* Tên dài tự thu cỡ để tiêu đề không quá ba dòng ("Góc của" và tối đa hai dòng tên). phong.js đặt --ten-dai là số chữ
   của tên; mỗi chữ tính rộng .6 cỡ chữ (chữ máy chữ, rộng nhất), hai dòng chừa chỗ lẻ cuối dòng khi ngắt giữa hai từ.
   Tên ngắn giữ nguyên cỡ của tiêu đề. */
.room-title { container-type: inline-size; }
.room-title .t-you { font-size: min(1em, calc(170cqi / (var(--ten-dai, 1) * .6))); }
.room-title__whisper { color: var(--cr-paper); opacity: .86; font-size: clamp(1rem, 4vw, 1.35rem); }
.room-note:empty { display: none; }
.room-top__head .t-small, .room-title__whisper, .room-top .t-label { text-shadow: 0 0 2px rgb(10 9 8 / .8), 0 1px 12px rgb(10 9 8 / .9); }
.room-note { color: var(--cr-paper); }
.room-note--quiet { color: var(--cr-muted); }

/* ---------- Đáy màn: gợi ý, hai nút, công tắc ---------- */
.room-panel { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: grid; gap: var(--sp-2); padding-top: var(--sp-4); max-width: 34rem; }
/* Câu hướng dẫn nằm thẳng trên ảnh (máy tính: chỗ lớp tối bên cạnh đã nhạt): chữ sáng hơn chữ phụ để đủ tương phản 4,5. */
.room-panel__hint { color: rgb(242 237 227 / .8); text-shadow: 0 0 2px rgb(10 9 8 / .8), 0 1px 12px rgb(10 9 8 / .9); }
.room-panel__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.room-panel__actions .btn { flex: 1 1 auto; }
/* Tên dài (tới 30 chữ, có khi không dấu cách) không đẩy chữ hay nút tràn khỏi màn: chữ mang tên (cả trong tấm trượt) được
   ngắt giữa từ khi cần, khối thao tác giữ đúng bề ngang màn, nút "Góc của <tên>" cắt bằng dấu ba chấm bên trong nút. */
.room-top__back, .room-title__whisper, .room-note, .room-panel__hint, .sheet-items li { overflow-wrap: anywhere; }
.room-panel { grid-template-columns: minmax(0, 1fr); }
.room-panel__actions .btn { min-width: 0; }
#my-corner { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.motion-toggle { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 48px; color: var(--cr-muted); justify-self: start; }
@media (min-width: 900px) and (orientation: landscape) {
  .room-top__head { margin-top: var(--sp-6); }
  .room-title { font-size: var(--fs-1); }
  .room-panel { right: auto; width: min(34rem, 44vw); padding-bottom: max(var(--sp-7), env(safe-area-inset-bottom, 0px)); }
  .room-panel__actions .btn { flex: 0 0 auto; }
  /* Góc của khách nằm nửa trái ảnh: cột chữ sang phải (lớp tối lật ở khối đầu tệp). */
  .is-flip .room-top__head { justify-self: end; width: min(30rem, 44vw); }
  /* lớp tối sau chữ nhạt dần 160px về phía ảnh, không thành đường cắt dọc qua cửa sổ và đèn lồng */
  .room-top::before {
    right: auto; width: calc(min(36rem, 50vw) + 160px);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 160px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 160px), transparent);
  }
  .is-flip .room-top::before {
    left: auto; right: 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 160px); mask-image: linear-gradient(to right, transparent, #000 160px);
  }
  .is-flip .room-panel { left: auto; right: 0; }
}

/* ---------- Điện thoại xoay ngang ----------
   Màn ngang thấp dưới 500px (rộng gấp 1,05 lần cao trở lên, cùng ngưỡng chọn ảnh ngang của pickView trong phong.js):
   bố cục cột bên như từ 900px. Chữ và nút một bên, ảnh bên kia, cột chữ né góc của khách (.is-flip do phong.js gắn khi
   góc nằm nửa trái ảnh). Câu thì thầm và dòng gợi ý ẩn đi, tiêu đề về một dòng ("Góc của" đứng trước tên) và thu theo
   chiều cao màn, để đầu trang và khối thao tác vừa màn thấp. Chỉ trang phòng: trang cả quán có bố cục riêng khi chưa
   tới 900px. */
@media (min-aspect-ratio: 21/20) and (max-height: 500px) {
  .room-page .room-top__head { width: min(30rem, 46vw); }
  .room-page.is-flip .room-top__head { justify-self: end; }
  .room-page .room-title { font-size: min(var(--fs-1), 13vh); }
  .room-page .room-title__lead { display: inline; }
  /* dòng chi nhánh trong cột hẹp ngắt thành hai dòng đều nhau, không để một chữ rơi xuống dòng dưới */
  .room-page #place { text-wrap: balance; }
  .room-page .room-title__whisper, .room-page .room-panel__hint { display: none; }
  /* khối thao tác rộng bằng cột chữ cộng lề hai bên (lề như .safe-x), nên nút và công tắc thẳng mép với chữ ở cả hai
     bên, kể cả khi cột lật sang phải */
  .room-page .room-panel {
    right: auto; max-width: none; padding-top: var(--sp-2);
    width: calc(min(30rem, 46vw) + max(var(--gut), env(safe-area-inset-left, 0px)) + max(var(--gut), env(safe-area-inset-right, 0px)));
  }
  .room-page.is-flip .room-panel { left: auto; right: 0; }
  /* nút rộng theo chữ như từ 900px: hai nút đứng một hàng khi cột đủ rộng, đỡ một hàng nút trên màn thấp */
  .room-page .room-panel__actions .btn { flex: 0 0 auto; }
  /* lớp tối sau chữ chỉ phủ cột chữ, nhạt dần 120px về phía ảnh */
  .room-page .room-top::before {
    right: auto; width: calc(46vw + 120px);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 120px), transparent);
  }
  .room-page.is-flip .room-top::before {
    left: auto; right: 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 120px); mask-image: linear-gradient(to right, transparent, #000 120px);
  }
}

/* Lưới an toàn: đầu trang vẫn chạm khối thao tác (tên dài viết liền, cỡ chữ hệ thống lớn, màn quá thấp) thì phong.js
   gắn .is-xep: đầu trang rồi khối thao tác xếp nối tiếp trong một cột cuộn được, cảnh phòng đứng yên phía sau. Màn đủ
   chỗ không có class này nên không đổi gì. */
.room-page.is-xep { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.room-page.is-xep .room, .room-page.is-xep .room__shade { position: fixed; }
.room-page.is-xep .room-top, .room-page.is-xep .room-panel { position: relative; flex: none; }
.room-page.is-xep .room-panel { margin-top: auto; }
.room-page.is-xep.is-flip .room-panel { margin-left: auto; }

/* ---------- Tấm trượt ---------- */
.sheet-title { margin: var(--sp-2) 0 var(--sp-3); }
.sheet-lead { margin-bottom: var(--sp-2); }
.sheet-items { margin: 0 0 var(--sp-4); padding: 0; list-style: none; display: grid; gap: 2px; }
.sheet-items li { display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; padding: var(--sp-2) 0; border-bottom: 1px dashed var(--cr-line); }
.sheet-items li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cr-lamp); box-shadow: 0 0 10px rgb(242 193 78 / .7); }
.sheet-items li.is-locked { color: var(--you-muted); }
.sheet-items li.is-locked::before { background: var(--cr-dim); box-shadow: none; }
.sheet-sessions { margin-bottom: var(--sp-4); }

/* ---------- Chưa có brief ---------- */
.empty-room { min-height: 100dvh; display: grid; align-content: center; gap: var(--sp-4); padding: var(--sp-7) var(--gut); max-width: 32rem; margin-inline: auto; }

/* ---------- Diorama ---------- */
.map { touch-action: none; }
.map.is-grab { cursor: grab; }
.map.is-grabbing { cursor: grabbing; }
.map__img { object-fit: contain; }
.map__dot {
  position: absolute; left: 0; top: 0; width: 22px; margin: -14px 0 0 -11px; pointer-events: none;
}
.map__dot svg { position: relative; display: block; width: 100%; height: auto; }
/* quầng đèn vàng của quán phía sau mini-me (đèn là của quán, màu là của khách) */
.map__dot::before {
  content: ""; position: absolute; left: 50%; top: 40%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(242 193 78 / .55), rgb(242 193 78 / .18) 55%, rgb(242 193 78 / 0));
}
.map-tag {
  position: absolute; z-index: 4; left: 0; top: 0; pointer-events: none;
  padding: .3em .7em; border-radius: var(--r-pill); background: rgb(15 14 12 / .78); color: var(--cr-paper);
  font: 450 var(--fs-label)/1.3 var(--font-label); letter-spacing: .04em; white-space: nowrap;
  opacity: 0; transition: opacity var(--d-fast) var(--ease-out);
}
.map-tag.is-on { opacity: 1; }
.map-tag b { color: var(--you-1); font-weight: 500; }
.map-time { display: grid; gap: var(--sp-2); }
.map-time__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.map-time__now { font: 500 var(--fs-small)/1.2 var(--font-label); color: var(--cr-paper); letter-spacing: .04em; }
.map-range { width: 100%; height: 44px; margin: 0; background: none; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.map-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #3b4a7a, #f3c98b 30%, #f6e3a1 50%, #e9a46a 68%, #6f7fb8 82%, #3b4a7a); }
.map-range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #3b4a7a, #f3c98b 30%, #f6e3a1 50%, #e9a46a 68%, #6f7fb8 82%, #3b4a7a); }
.map-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: var(--cr-lamp); box-shadow: 0 0 14px rgb(242 193 78 / .7); border: 0; }
.map-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--cr-lamp); box-shadow: 0 0 14px rgb(242 193 78 / .7); border: 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); color: var(--cr-muted); }
.map-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.map-legend .is-lamp { background: var(--cr-lamp); box-shadow: 0 0 8px rgb(242 193 78 / .7); }
.map-legend .is-you { background: var(--you-1); border-radius: 2px; }
.map-zoom { position: absolute; z-index: 5; right: max(var(--gut), env(safe-area-inset-right, 0px)); display: grid; gap: var(--sp-2); }
.map-zoom .btn { width: 48px; min-height: 48px; padding: 0; background: rgb(15 14 12 / .62); font-size: 1.25rem; }
.map canvas { touch-action: none; outline: none; }
.map canvas:focus-visible { outline: 2px solid var(--cr-lamp); outline-offset: -4px; }
.map-title { font-size: clamp(2.2rem, 10vw, 4rem); }
/* Bảng giờ nằm trên cảnh đang chuyển động: nền gần đặc để chữ luôn đọc được (không làm mờ nền, máy yếu đỡ tốn). */
.map-panel { gap: var(--sp-3); padding-top: var(--sp-5); background: linear-gradient(to bottom, rgb(15 14 12 / 0), rgb(15 14 12 / .9) var(--sp-5), rgb(15 14 12 / .94)); }
.map-time__row { flex-wrap: wrap; row-gap: 0; }
.map-time__now { flex: 1 1 100%; }
.map-panel .room-note--quiet { color: var(--cr-muted); }
.map-panel__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.map-time__links { display: inline-flex; gap: var(--sp-1); flex: none; }
.map-link { position: relative; min-height: 44px; padding: 0 var(--sp-2); color: var(--cr-lamp); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.map-closed { color: var(--you-1); font-size: clamp(1rem, 4vw, 1.2rem); }
.map-sample { color: var(--cr-muted); }
.map-zoom { bottom: 40%; }
.map-tag { transform: translate(-200px, -200px); }
@media (min-width: 900px) and (orientation: landscape) {
  .map-zoom { top: auto; bottom: max(var(--sp-7), env(safe-area-inset-bottom, 0px)); transform: none; }
}
/* Điện thoại dọc: khung cảnh chiếm phần trên (58% chiều cao), mô hình vừa gần kín bề ngang, nằm dưới tiêu đề; tiêu đề
   nhỏ lại trên một dải tối .88 phủ hết bề ngang (chữ nhỏ đủ tương phản cả khi cảnh sáng buổi sáng), nhạt dần trong 28px
   dưới chữ cuối; bảng giờ nằm ngay dưới khung, không đè lên cảnh. */
@media not all and (min-width: 900px) and (orientation: landscape) {
  .map-page .map, .map-page .map__shade { bottom: auto; height: 58vh; height: 58svh; }
  .map-page .map__shade { background: linear-gradient(to top, rgb(10 9 8 / .85) 0, rgb(10 9 8 / 0) 12%); }
  .map-page .room-top::before {
    inset: 0 0 -28px 0;
    background: linear-gradient(to bottom, rgb(15 14 12 / .88) 0, rgb(15 14 12 / .88) calc(100% - 20px), rgb(15 14 12 / 0) 100%);
  }
  .map-title { font-size: var(--fs-2); }
  /* màn thấp (360×560 trong trình duyệt của TikTok): bảng dưới khung tự cuộn, nút chính và công tắc vẫn tới được */
  .map-panel { top: 58vh; top: 58svh; bottom: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; gap: var(--sp-2); padding-top: var(--sp-2); background: none; }
  .map-legend { flex-wrap: nowrap; gap: var(--sp-3); font-size: .75rem; white-space: nowrap; }
  .map-sample { font-size: .6875rem; }
}
/* Chế độ chụp ảnh tĩnh (cong-cu/xuat-anh.mjs): chỉ còn cảnh; chữ và nút vẫn chiếm chỗ (ẩn đi) để mô hình nằm đúng vùng
   trống như trang thật, ảnh tĩnh đặt dưới chữ không bị che. */
.is-chup .room-top, .is-chup .room-panel, .is-chup .map-zoom { visibility: hidden; }
.is-chup .map__shade, .is-chup .cr-grain, .is-chup .map-tag { display: none; }