/* Trang khách "chốn riêng của [tên]". Khung quán (đèn vàng, phòng, hạt phim) + ba bố cục do brief quyết:
   html[data-layout="poster" | "desk" | "wall"], chế độ sáng html[data-mode], giọng chữ html[data-voice], nhịp
   html[data-tempo], thật/vẽ html[data-art], cách xem html[data-view="owner" | "friend"].
   Đồ vật (sổ, ly, vé...) nằm ở page-objects.css. Chỉ chuyển động transform/opacity; :hover chỉ khi có chuột. */

/* ---------- Chưa dựng xong: giữ phòng tối, không lộ trang chưa có màu ---------- */
html:not(.is-ready), html:not(.is-ready) body { background: var(--cr-ink); }
html:not(.is-ready) body > :not(.cr-grain):not(noscript) { visibility: hidden; }
body { position: relative; }

/* ---------- Ánh sáng của giờ khách hay tới (tĩnh, nằm sau nội dung) ---------- */
.room-light { position: absolute; inset: 0 0 auto; height: 150svh; pointer-events: none; z-index: 0; }
[data-mode="chieu"] .room-light {
  /* nắng chiều lọt qua rèm: các vệt chéo từ góc phải trên, mờ dần xuống dưới */
  background: repeating-linear-gradient(118deg, rgb(255 196 120 / 0) 0 38px, rgb(255 196 120 / .075) 38px 70px);
  -webkit-mask: radial-gradient(120% 80% at 100% 0%, #000 0%, transparent 70%);
  mask: radial-gradient(120% 80% at 100% 0%, #000 0%, transparent 70%);
}
[data-mode="sang"] .room-light {
  /* nắng sáng qua cửa sổ: một mảng sáng ấm nghiêng từ trái */
  background: linear-gradient(105deg, rgb(255 250 235 / .55), rgb(255 250 235 / 0) 55%);
  -webkit-mask: radial-gradient(90% 70% at 0% 10%, #000, transparent 75%);
  mask: radial-gradient(90% 70% at 0% 10%, #000, transparent 75%);
}
.top, .viewbar, .page, .own-photos, .next, .foot { position: relative; z-index: 1; }

/* ---------- Thanh đầu trang ---------- */
/* Khoảng chừa dưới thanh đầu = phần px cố định + phần rem: người dùng đặt cỡ chữ lớn thì thanh đầu cao lên, nội dung lùi theo. */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--sp-3); padding-bottom: var(--sp-2); position: absolute; inset: 0 0 auto; z-index: var(--z-sticky); }
.top a { display: inline-flex; align-items: center; min-height: 44px; font: 450 var(--fs-label)/1.3 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--you-muted); }
.top__sample { order: 3; flex-basis: 100%; font: 450 .6875rem/1.3 var(--font-label); letter-spacing: .04em; color: var(--you-muted); }
.top__sample > span { display: inline-block; }
.top__sample > span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .6em; border-radius: 50%; border: 1px solid currentColor; vertical-align: .05em; }
/* Đèn treo: dây đèn chạy từ mép trên qua dòng "Trang mẫu". Dòng chữ có nền cùng màu trang, nằm trên lớp đèn, nên dây đi
   sau chữ thay vì cắt ngang chữ. */
html:has(.hang-lamp) .top__sample > span { padding: 2px 10px 2px 8px; margin-left: -8px; border-radius: var(--r-pill); background: var(--you-bg); }
@media (hover: hover) and (pointer: fine) { .top a:hover { color: var(--you-text); } }
/* Bản riêng, chế độ sáng: cảnh đầu hạ nền tới bậc −2 mà thanh nằm ngoài cảnh, nên pha 20% về màu chữ để giữ 4,5:1. */
html[data-rieng="on"][data-mode="sang"] :is(.top a:not(:hover), .top__sample) { color: color-mix(in oklab, var(--you-muted) 80%, var(--you-text)); }
.viewbar { padding-top: calc(env(safe-area-inset-top, 0px) + 24px + 2.5rem); font-size: var(--fs-small); color: var(--you-muted); }
.top:has(> [data-sample]:not([hidden])) ~ .viewbar { padding-top: calc(env(safe-area-inset-top, 0px) + 24px + 4.5rem); } /* thanh đầu có thêm dòng "Trang mẫu" */
.viewbar a { color: var(--you-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tên của khách ---------- */
/* Tên dùng bộ font nhỏ chỉ cho tên (--font-you-name, shared/tokens.css); ký tự ngoài bộ tự rơi về font đầy đủ. */
.you-name { font-family: var(--font-you-name); color: var(--you-1); margin: 0; font-size: var(--fs-hero); overflow-wrap: normal; word-break: keep-all; max-width: 100%; }
.you-name .cr-word { white-space: nowrap; }
.you-name.is-long { overflow-wrap: anywhere; }   /* tên một chữ rất dài: ở cỡ nhỏ nhất vẫn không vừa thì cho xuống dòng giữa chữ */
.you-name.is-long .cr-word { white-space: normal; }
.you-name > span { will-change: auto; }
/* Tên theo tham số (rieng/components/ten.js): căn, nghiêng; cỡ (data-co) và số dòng (data-dong) do fitName đọc. */
.you-name[data-can="trai"] { text-align: left; justify-self: start; }
.you-name[data-can="giua"] { text-align: center; justify-self: center; }
.you-name[data-can="phai"] { text-align: right; justify-self: end; }
.you-name.you-name[data-nghieng] { rotate: var(--ten-nghieng); }
.caret { display: inline-block; width: .34em; height: .78em; margin-left: .08em; vertical-align: -.06em; background: var(--you-1); animation: caret 1.05s steps(1) 1.4s 6; }
@keyframes caret { 50% { opacity: 0; } }
.only-you {
  display: inline-flex; align-items: center; gap: .35em; width: max-content; max-width: 100%; margin-top: var(--sp-2);
  font: 450 .6875rem/1.2 var(--font-label); letter-spacing: .06em; text-transform: uppercase;
  color: var(--you-muted); border: 1px dashed currentColor; border-radius: var(--r-pill); padding: .3em .7em .28em;
}
.only-you::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cr-lamp); }

/* ---------- Đèn của quán: chụp vàng, ánh trắng ấm. Cùng một màu ở mọi trang. ---------- */
.lamp-light { position: absolute; display: block; pointer-events: none; }
.hang-lamp { position: absolute; top: 0; left: 50%; width: 0; height: 100%; pointer-events: none; }
.hang-lamp__cord { position: absolute; left: -.75px; top: 0; width: 1.5px; height: 15svh; background: var(--you-muted); opacity: .55; }
.hang-lamp__shade {
  position: absolute; top: 15svh; left: -46px; width: 92px; height: 44px;
  border-radius: 92px 92px 10px 10px / 70px 70px 10px 10px;
  background: linear-gradient(180deg, #b8892c, var(--cr-lamp) 62%, #ffd56e);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18);
}
.hang-lamp__shade .lamp-light { left: 8px; right: 8px; bottom: -6px; height: 12px; border-radius: 50%; background: var(--cr-lamp-light); box-shadow: 0 0 22px 8px rgb(255 214 120 / .6), 0 10px 40px 18px rgb(242 193 78 / .25); }
.hang-lamp__pool.pool { inset: auto; top: calc(15svh + 30px); left: -80vw; width: 160vw; height: 86svh; max-width: none; background: radial-gradient(ellipse 46% 50% at 50% 24%, rgb(255 214 120 / .34) 0%, rgb(242 193 78 / .12) 44%, rgb(242 193 78 / 0) 72%); will-change: auto; }
/* Ánh sáng toả xuống từ miệng chụp: mép trên hộp vũng bằng 0 trên cả bề ngang (gradient ở đó vẫn còn đậm, bị cắt thành
   một đường ngang trên nền tối). Mờ dần theo đường cong êm tới 14% chiều cao, nên tâm sáng ở 24% không bị tối đi. */
.hang-lamp__pool.pool {
  -webkit-mask-image: linear-gradient(transparent, rgb(0 0 0 / .06) 2.5%, rgb(0 0 0 / .26) 5%, rgb(0 0 0 / .56) 8%, rgb(0 0 0 / .86) 11%, #000 14%);
  mask-image: linear-gradient(transparent, rgb(0 0 0 / .06) 2.5%, rgb(0 0 0 / .26) 5%, rgb(0 0 0 / .56) 8%, rgb(0 0 0 / .86) 11%, #000 14%);
}

.desk-lamp { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 92px); right: max(-20px, calc(var(--gut) - 30px)); width: 110px; height: 110px; pointer-events: none; z-index: 2; }
.desk-lamp__arm { position: absolute; top: 50px; left: 55px; width: 120px; height: 9px; border-radius: 6px; background: linear-gradient(#5a554d, #2e2a25); rotate: -18deg; transform-origin: 0 50%; box-shadow: 0 6px 10px rgb(0 0 0 / .4); }
.desk-lamp__shade { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #ffd56e, var(--cr-lamp) 45%, #b8892c 100%); box-shadow: 0 10px 22px rgb(0 0 0 / .55), inset 0 0 0 5px rgb(0 0 0 / .12); }
.desk-lamp__shade::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, #8f6a20, #6d4f15); box-shadow: inset 0 2px 4px rgb(0 0 0 / .5); }
.desk-lamp__shade .lamp-light { inset: -10px; border-radius: 50%; box-shadow: 0 0 34px 14px rgb(255 214 120 / .42), 0 0 90px 40px rgb(242 193 78 / .16); }

.clip-lamp { position: absolute; top: 0; right: 0; width: 100%; height: 120svh; pointer-events: none; overflow: hidden; }
.clip-lamp__shade { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 62px); right: calc(var(--gut) + 6px); width: 70px; height: 52px; rotate: 38deg; border-radius: 10px 10px 36px 36px / 10px 10px 30px 30px; background: linear-gradient(90deg, #b8892c, var(--cr-lamp) 55%, #ffd56e); box-shadow: 0 8px 18px rgb(0 0 0 / .4); }
.clip-lamp__shade::before { content: ""; position: absolute; top: -14px; left: 26px; width: 18px; height: 18px; border-radius: 4px; background: #3a352e; }
.clip-lamp__shade .lamp-light { left: 6px; right: 6px; bottom: -5px; height: 11px; border-radius: 50%; background: var(--cr-lamp-light); box-shadow: 0 0 20px 8px rgb(255 214 120 / .55); }
.clip-lamp__cone {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 90px); right: calc(var(--gut) + 30px); width: 150vw; height: 110svh; transform-origin: 100% 0;
  background: radial-gradient(ellipse 60% 45% at 78% 18%, rgb(255 214 120 / .26), rgb(242 193 78 / .08) 50%, rgb(242 193 78 / 0) 75%);
  clip-path: polygon(100% 0, 0 62%, 0 100%, 34% 100%);
}
[data-mode="sang"] .lamp-light, [data-mode="sang"] .clip-lamp__cone, [data-mode="sang"] .hang-lamp__pool { opacity: .6; }
/* Đèn đặt theo tham số (rieng/components/den.js, chỉ khi có x/y, co, vung): dời chỗ, đổi cỡ, đổi độ rộng vũng; màu không đổi. */
.hang-lamp[data-den~="dat"] { left: var(--den-x); top: var(--den-y); }
.desk-lamp[data-den~="dat"] { left: var(--den-x); top: var(--den-y); right: auto; margin-left: -55px; }
.clip-lamp[data-den~="dat"] .clip-lamp__shade { left: var(--den-x); top: var(--den-y); right: auto; margin-left: -35px; }
.clip-lamp[data-den~="dat"] .clip-lamp__cone { right: calc(100% - var(--den-x)); top: calc(var(--den-y) + 28px); }
[data-den~="co"] :is(.hang-lamp__shade, .clip-lamp__shade), .desk-lamp[data-den~="co"] { scale: var(--den-co); }
[data-den~="vung"] :is(.hang-lamp__pool, .desk__pool, .clip-lamp__cone) { scale: var(--den-vung); }

/* ---------- Bố cục 1: Tấm áp phích ---------- */
.pst-hero { display: grid; grid-template-rows: 1fr auto; padding-top: calc(15svh + 40px + 2.5rem); padding-bottom: var(--sp-6); overflow: clip; }
.pst-hero__body { display: grid; justify-items: center; align-content: center; gap: var(--sp-5); text-align: center; position: relative; min-width: 0; } /* không để chữ dài nong rộng cột lưới */
.pst-hero__drops { --drop: 46px; }
.pst-hero__whisper { max-width: 22ch; color: var(--you-text); }
/* Lời thì thầm dưới tên (mọi bố cục, cả bản riêng): chia dòng cân nhau, không để một chữ đứng một mình ở dòng cuối. */
#page .t-whisper { text-wrap: balance; }
/* Dấu "chốn riêng của bạn · <chi nhánh>" ở màn đầu: cùng kiểu chữ với phiếu, nhỏ và nhạt hơn tên. */
.you-mark { margin: 0; font: 450 var(--fs-label)/1.3 var(--font-label); letter-spacing: .04em; color: var(--you-muted); }
.desk__lines .you-mark { margin-top: var(--sp-3); }
.pst-hero__body > .you-mark { margin-top: calc(var(--sp-2) - var(--sp-5)); } /* sát lời thì thầm: màn đầu áp phích không cao thêm, phiếu vẫn trong màn */
.wall__ticket:has(+ .wall__mark) { margin-bottom: var(--sp-2); }
.wall__mark { margin-bottom: var(--sp-5); }
/* Bề hẹp: phiếu chia cố định hai dòng, "Phiếu 7981" một dòng, phần còn lại một dòng, để dấu "·" không treo cuối dòng. */
@media (max-width: 767px) {
  #page :is(.ticket, .label-tape) > span:first-child { flex-basis: 100%; }
  #page :is(.ticket, .label-tape) > span:first-child::after { content: none; }
}
.pst-hero__me { width: clamp(68px, 18vw, 92px); margin-bottom: calc(var(--sp-5) * -.5); } /* người nhỏ ngồi ngay dưới đèn treo */
.pst-hero__ticket { justify-content: center; text-align: center; width: auto; margin-inline: var(--gut); }
/* Dấu "·" đi cuối mục đứng trước và mỗi mục không ngắt giữa chừng: xuống dòng thì dòng mới bắt đầu bằng chữ. */
.pst-hero__ticket span, .wall__ticket span { white-space: nowrap; }
.pst-hero__ticket span:not(:last-child)::after, .wall__ticket span:not(:last-child)::after { content: "·"; margin-left: .9em; color: var(--you-muted); }
/* Phiếu kiểu cuống vé (component phieu, kieu cuong): giấy in của quán, mép trái răng cưa. Co theo khung, xuống dòng giữa
   các mục như dải phiếu ở trên (bề rộng tối thiểu là mục dài nhất, không phải cả dải). */
.ticket--cuong { width: fit-content; min-width: 0; max-width: 100%; padding: .6em 1em .6em 1.3em; border: 0; border-radius: 3px; background: var(--cr-print); color: var(--cr-print-ink); box-shadow: var(--shadow-print); -webkit-mask: radial-gradient(circle 4px at 0 50%, #0000 96%, #000) 0 0 / 100% 12px; mask: radial-gradient(circle 4px at 0 50%, #0000 96%, #000) 0 0 / 100% 12px; }
.ticket--cuong span { white-space: nowrap; }
.ticket--cuong span:not(:last-child)::after { content: "·"; margin-left: .9em; opacity: .6; }
.pst-sec-head { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.pst-sky { padding-top: var(--section); }
.paint--sky { height: min(55svh, 480px); }
.pst-stamps { padding-top: var(--section); }
[data-mode="sang"] .stamp { background: #fbf8f1; }
.stamps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
/* Áp phích đối xứng: từ máy tính bảng trở lên, tem dồn vào giữa như tên ở đầu trang. */
@media (min-width: 768px) {
  .stamps { grid-template-columns: repeat(auto-fit, minmax(200px, 240px)); justify-content: center; }
  .pst-stamps .pst-sec-head, .pst-sky .pst-sec-head { justify-items: center; text-align: center; }
  .pst-sky .paint-keys { justify-content: center; }
}

/* ---------- Bố cục 2: Mặt bàn (nhìn từ trên xuống, gỗ tối, quầng đèn theo tay) ---------- */
.desk {
  --wood: var(--cr-wood); --wood-2: var(--cr-wood-2);
  position: relative; overflow: clip; min-height: 100svh; padding-bottom: var(--sp-6);
  background:
    radial-gradient(130% 55% at 50% 0%, transparent 45%, rgb(0 0 0 / var(--go-toi, .32)) 100%),
    repeating-linear-gradient(90deg, rgb(255 236 200 / .022) 0 2px, transparent 2px 11px, rgb(0 0 0 / .07) 11px 12px, transparent 12px 27px, rgb(255 236 200 / .015) 27px 31px, transparent 31px 46px),
    linear-gradient(180deg, var(--wood-2), var(--wood) 18%, var(--wood) 82%, var(--wood-2));
}
[data-mode="sang"] .desk { --wood: #cfb58c; --wood-2: #bea072; --go-toi: .14; } /* mép bàn tối ít: chữ đặt trên gỗ còn đạt tương phản (GO_SANG trong page-blocks.js) */
[data-mode="sang"] .desk .paint-more > summary { opacity: 1; }
[data-mode="chieu"] .desk { --wood: #33251a; --wood-2: #443222; }
.desk__light { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; pointer-events: none; z-index: 0; overflow: visible; }
.desk__pool.pool { inset: -10% -45%; background: radial-gradient(ellipse 36% 28% at 50% 38%, rgb(255 214 120 / .28) 0%, rgb(242 193 78 / .09) 46%, rgb(242 193 78 / 0) 74%); }
[data-mode="sang"] .desk__pool.pool { opacity: .5; }
.desk__head { position: relative; z-index: 1; padding-top: calc(env(safe-area-inset-top, 0px) + 110px + 2.5rem); padding-bottom: var(--sp-8); }
.desk__head .you-name { max-width: 9em; }
.label-tape { display: inline-flex; flex-wrap: wrap; gap: .2em .8em; margin-top: var(--sp-4); padding: .55em .9em .5em; background: #1c1b19; color: #f2ede3; font: 500 var(--fs-label)/1.3 var(--font-label); letter-spacing: .12em; text-transform: uppercase; border-radius: 3px; rotate: -1.2deg; box-shadow: 0 6px 14px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .08); }
.desk__whisper { margin-top: var(--sp-5); max-width: 24ch; }
/* Dưới tên: phiếu và câu thì thầm bên trái, mini-me ngồi ở mép bàn bên phải (dưới đèn bàn). */
.desk__sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-4); }
.desk__me { width: clamp(80px, 22vw, 120px); margin-bottom: calc(-1 * (var(--sp-8) + 18px)); } /* thò xuống hàng đồ đầu tiên 18px, món đồ (vẽ sau) che lên */
.desk__me.is-alone { margin-bottom: calc(var(--sp-8) * -.4); }
.desk__me.is-alone .minime { -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.desk__items { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--sp-7) var(--sp-4); align-items: start; }
.desk__items > [data-span="l"] { grid-column: span 6; }
.desk__items > [data-span="m"] { grid-column: span 4; }
.desk__items > [data-span="s"] { grid-column: span 3; }
@media (min-width: 900px) {
  .desk__items { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); }
  .desk__items > [data-span="l"] { grid-column: span 7; }
  .desk__items > [data-span="m"] { grid-column: span 5; }
  .desk__items > [data-span="s"] { grid-column: span 4; }
  .desk__items > [data-wide="m"] { grid-column: span 5; } /* màn hình rộng: món dài vừa đủ đứng cặp với bảng màu */
}
.desk__edge { position: relative; z-index: 1; height: 1px; margin-top: var(--sp-8); background: rgb(0 0 0 / .45); box-shadow: 0 -1px 0 rgb(255 236 200 / .06); opacity: .6; } /* mép bàn: chỉ một đường, không chữ */
.desk .obj { --rot-obj: calc(var(--tilt) * var(--k)); rotate: var(--rot-obj); translate: calc(var(--k) * 8px) 0; }

/* ---------- Bố cục 3: Tường ghim ---------- */
.wall { position: relative; padding-bottom: var(--sp-6); overflow: clip; }
.wall::before {
  /* lỗ đinh ghim cũ rải rác trên tường: thấy được nhưng không giành mắt */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 20% 30%, rgb(0 0 0 / .35) 0 1.5px, transparent 2px) 0 0 / 137px 173px,
              radial-gradient(circle at 70% 60%, rgb(0 0 0 / .3) 0 1.2px, transparent 1.8px) 0 0 / 211px 157px;
}
.wall__head { position: relative; padding-top: calc(env(safe-area-inset-top, 0px) + 80px + 2.5rem); padding-bottom: var(--sp-8); }
.wall__ticket { margin-bottom: var(--sp-5); max-width: 30rem; }
.wall__head .you-name { rotate: -2.5deg; transform-origin: 0 60%; max-width: 8em; text-shadow: 0 2px 0 rgb(0 0 0 / .12); }
.wall__slip, .thi-tham--giay { display: inline-block; margin-top: var(--sp-5); padding: .5em .9em .6em; background: var(--cr-print); color: var(--cr-print-ink); rotate: 1.5deg; box-shadow: var(--shadow-print); max-width: 22ch; }
.wall__board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); align-items: start; position: relative; }
.wall__col { display: grid; gap: var(--sp-7); align-content: start; min-width: 0; }
.wall__col:nth-child(2) { padding-top: var(--lech, 64px); } /* xep_tuong: cột hai bắt đầu thấp hơn (lech) */
.wall__col:nth-child(3) { display: none; }
@media (min-width: 900px) {
  .wall__board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-7); }
  .wall__col:nth-child(3) { display: grid; padding-top: 24px; }
}
.wall .obj { --rot-obj: calc(var(--tilt) * var(--k) * 1.3); rotate: var(--rot-obj); }
.wall .obj:not(.obj--pick)::before {
  content: ""; position: absolute; z-index: 3; top: -10px; left: 50%; width: 62px; height: 20px; margin-left: -31px;
  background: var(--you-1); opacity: .78; rotate: -4deg;
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px)), repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 4px);
}
.wall .obj:nth-child(even)::before { background: var(--you-2); rotate: 5deg; left: 40%; }
.wall .obj--crt::before, .wall .obj--cup::before, .wall .obj--notes::before { display: none; }
/* huy hiệu: ghim bằng đinh ghim tròn thay cho băng dính */
/* Đinh ghim tròn (huy hiệu, mini-me giấy cắt): .obj lặp lại để thắng luật băng dính .obj:not(.obj--pick)::before. */
.wall .obj--badge .badge, .wall .obj--minime .minime { margin-inline: auto; } /* đinh ghim ở giữa món: món cũng phải ở giữa */
.wall .obj--minime .obj__caption { text-align: center; }
.wall .obj.obj--badge::before, .wall .obj.obj--minime::before { width: 14px; height: 14px; margin-left: -7px; top: 6px; left: 50%; border-radius: 50%; rotate: 0deg; opacity: 1; -webkit-mask: none; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .7), var(--you-2) 55%, color-mix(in oklab, var(--you-2) 70%, #000)); box-shadow: 0 3px 4px rgb(0 0 0 / .4); }

/* ---------- Bức tranh nhiều màu ---------- */
.paint { position: relative; }
.paint canvas { width: 100%; height: 100%; touch-action: pan-y; cursor: pointer; }
/* Xấp thẻ: rộng theo khung chứa (tối đa 560px), không theo cỡ canvas. Thiếu width thì lề auto trong lưới làm khung co theo
   cỡ canvas lần đo đầu, rồi lớn dần vài px mỗi lần đo lại (hộp bao của món xoay) hoặc kẹt ở cỡ nhỏ. */
.paint--chips { width: 100%; aspect-ratio: 1.45; max-width: 560px; margin-inline: auto; }
.paint--calendar { aspect-ratio: 1; }
.paint[data-cao] { height: calc(var(--tranh-cao) * 100svh); aspect-ratio: auto; max-width: none; } /* tranh theo tham số cao */
.paint__label {
  position: absolute; z-index: 2; left: 0; top: 0; pointer-events: none; white-space: nowrap; max-width: 80vw; overflow: hidden; text-overflow: ellipsis;
  padding: .45em .8em .42em; border-radius: var(--r-pill); background: var(--cr-ink); color: var(--cr-paper);
  font: 450 var(--fs-label)/1.2 var(--font-label); letter-spacing: .04em; box-shadow: 0 6px 18px rgb(0 0 0 / .35);
  opacity: 0; transform: translate(-50%, calc(-100% - 6px)) scale(.96); transform-origin: 50% 100%;
  transition: opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.paint__label::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .5em; border-radius: 50%; background: var(--c); vertical-align: -.05em; }
.paint__label.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 10px)); }
.paint--sky .paint__label.is-on, .paint--sky .paint__label { transform-origin: 50% 50%; }
.paint-keys { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.paint-more { margin-top: var(--sp-2); }
.paint-more > summary { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; cursor: pointer; list-style: none; font: 450 var(--fs-label)/1.3 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: currentColor; opacity: .8; }
.paint-more > summary::-webkit-details-marker { display: none; }
.paint-more .paint-keys { margin-top: var(--sp-2); }
.paint-key {
  display: inline-flex; align-items: center; gap: .5em; max-width: 100%; min-height: 44px; padding: .4em .9em .4em .55em; border-radius: var(--r-pill);
  border: 1px solid var(--you-line); color: var(--you-text); font-size: var(--fs-small); line-height: 1.2; text-align: start; overflow-wrap: normal;
  transition: transform var(--d-press) var(--ease-out), border-color var(--d-fast) ease, background-color var(--d-fast) ease;
}
.paint-key i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.paint-key .only-you { margin: 0 0 0 .15em; font-size: .625rem; }
/* Chú giải trong món đồ hẹp (cột bố cục tường chỉ 124–137px ở 360–390): nút màu có dấu "chỉ mình bạn" xếp hai hàng,
   hàng trên chấm màu và nhãn (nhãn dài thì xuống dòng sau chữ "màu", xem keyLabel), hàng dưới là dấu. Để chung một hàng
   thì nhãn bị bóp mỗi chữ một dòng, chấm màu méo, nút tràn ra ngoài món đồ. Lề phải nút bớt một chút để nhãn ba chữ
   ("màu hôm nay") vẫn một dòng ở 390. */
@container (max-width: 300px) {
  .paint-key { padding-right: .7em; }
  .paint-key:has(.only-you) { display: inline-grid; grid-template-columns: 18px minmax(0, max-content); column-gap: .5em; row-gap: .4em; justify-items: start; border-radius: var(--r-lg); }
  .paint-key:has(.only-you) .only-you { grid-column: 1 / -1; margin: 0; white-space: nowrap; }
}
.paint-key:active { transform: scale(.97); }
.paint-key[aria-pressed="true"] { border-color: var(--you-text); background: color-mix(in oklab, var(--you-text) 8%, transparent); }
@media (hover: hover) and (pointer: fine) { .paint-key:hover { border-color: var(--you-muted); } }

/* ---------- Ảnh riêng của chủ trang ---------- */
.own-photos { padding-top: var(--section); }
.own-photos__row { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-4); }
.own-photo { width: min(44%, 240px); --rot: -1.5deg; }
.own-photo:nth-child(2) { --rot: 2deg; }
.own-photo .print__tape { clip-path: inset(0 0 0 0); }
.own-photo img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Đi tiếp: cửa đèn vào phòng ---------- */
.next { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--sp-5); padding-top: var(--section); padding-bottom: var(--sp-8); }
[data-layout="desk"] .next { padding-top: var(--sp-8); } /* mép bàn gỗ đã là chỗ ngắt chương */
.next__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; max-width: 100%; }
.next__row > .btn { max-width: 100%; white-space: normal; text-align: center; } /* chữ phóng to (cài đặt cỡ chữ lớn): nút xuống dòng, không tràn */
.next__note, .next__whisper { max-width: var(--measure); }
.door-cta {
  display: flex; align-items: center; gap: var(--sp-5); width: 100%; max-width: 560px; padding: var(--sp-4); border-radius: var(--r-you);
  background: var(--cr-ink); color: var(--cr-paper); box-shadow: var(--shadow-lift); position: relative; overflow: hidden;
  transition: transform var(--d-press) var(--ease-out);
}
.door-cta:active { transform: scale(.97); }
.door-cta__frame { position: relative; flex: none; width: 74px; height: 104px; border-radius: 37px 37px 4px 4px; background: #050504; box-shadow: inset 0 0 0 3px #2a251f; overflow: hidden; }
.door-cta__lamp { position: absolute; top: 18px; left: 50%; width: 26px; height: 13px; margin-left: -13px; border-radius: 26px 26px 4px 4px; background: var(--cr-lamp); box-shadow: 0 8px 22px 6px rgb(255 214 120 / .45); }
.door-cta__leak { position: absolute; inset: auto 0 0; height: 46px; background: radial-gradient(ellipse 70% 100% at 50% 100%, rgb(255 214 120 / .5), transparent 70%); }
.door-cta__text { display: grid; gap: 4px; }
.door-cta__text strong { font: 700 1.125rem/1.25 var(--font-body); }
.door-cta__text span { font-size: var(--fs-small); color: var(--cr-muted); }
@media (hover: hover) and (pointer: fine) { .door-cta:hover .door-cta__lamp { background: var(--cr-lamp-hi); } }

/* ---------- Chân trang ---------- */
.foot { display: grid; gap: var(--sp-5); padding-top: var(--sp-6); padding-bottom: max(var(--sp-7), env(safe-area-inset-bottom, 0px)); border-top: 1px dashed var(--you-line); }
.foot__tools { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); }
.foot__tools a, .foot__tools button { display: inline-flex; align-items: center; min-height: 44px; color: var(--you-text); font-size: var(--fs-small); text-decoration: underline; text-decoration-color: var(--you-line); text-underline-offset: 4px; }
.foot__tools [data-wipe] { color: var(--you-muted); }
.foot__motion { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); max-width: 360px; font-size: var(--fs-small); color: var(--you-muted); }
.foot__sign { font: 450 var(--fs-label)/1.5 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--you-muted); }
.foot__sign a { display: inline-block; padding-block: 12px; }
[data-mode="sang"] .switch { background: #d9cfbf; border-color: rgb(29 25 20 / .25); }

/* ---------- Tấm trượt ---------- */
.sheet__title { margin-bottom: var(--sp-3); color: var(--you-text); }
.sheet .t-body { color: var(--you-text); margin-bottom: var(--sp-4); }
.sheet__warn { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); border: 1px dashed var(--cr-lamp); font-size: var(--fs-small); color: var(--you-text); }
.sheet__link { width: 100%; min-height: 48px; padding: 0 var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--you-line); background: var(--you-bg); color: var(--you-muted); font: 400 16px/1 var(--font-label); text-overflow: ellipsis; }
.sheet__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

/* ---------- Khoảnh khắc mở trang ---------- */
.opening { position: fixed; inset: 0; z-index: var(--z-intro); background: var(--cr-ink); overflow: hidden; touch-action: none; cursor: pointer; }
.muc-loang { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* vệt mực gọi riêng (muc_loang) */
.opening__ink, .muc-loang__vet { position: absolute; left: var(--x); top: var(--y); width: 44vmin; height: 44vmin; margin: -22vmin 0 0 -22vmin; border-radius: 50%; background: radial-gradient(circle closest-side, var(--c) 0 50%, transparent 100%); opacity: 0; }
.opening__ink.is-bg { width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax; background: radial-gradient(circle closest-side, var(--c) 0 40%, transparent 100%); } /* mép rất mềm: nền sáng (chế độ sáng) lan ra không thành vòng đèn pin */

/* ---------- Chưa có trang / chưa mở cho bạn bè ---------- */
.empty { display: grid; align-content: center; justify-items: start; gap: var(--sp-5); padding-top: 18svh; }
.empty__lamp { width: 92px; height: 44px; border-radius: 92px 92px 10px 10px / 70px 70px 10px 10px; background: var(--cr-lamp); box-shadow: 0 16px 50px 16px rgb(255 214 120 / .3); }
.empty__lamp.is-off { background: var(--cr-dim); box-shadow: none; }

/* ---------- Nhịp và giảm chuyển động ---------- */
/* lively (hoặc cảnh có class xo-nhe): đồ xô nhẹ rồi nằm yên khi hiện ra (đổi góc xoay, không đổi bố cục) */
.has-motion[data-tempo="lively"] .obj.is-in, .has-motion[data-tempo="lively"] .stamp.is-in,
.has-motion .xo-nhe .obj.is-in, .has-motion .xo-nhe .stamp.is-in { animation: settle 900ms var(--ease-out) var(--reveal-delay, 0ms) both; }
@keyframes settle {
  0% { rotate: calc(var(--rot-obj, 0deg) + 7deg); }
  62% { rotate: calc(var(--rot-obj, 0deg) - 1.4deg); }
  100% { rotate: var(--rot-obj, 0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .has-motion .obj.is-in, .has-motion .stamp.is-in { animation: none !important; }
  .caret { animation: none; }
}
[data-motion="reduce"] .obj.is-in, [data-motion="reduce"] .stamp.is-in { animation: none !important; }
[data-motion="reduce"] .caret { animation: none; }

@media (min-width: 900px) {
  .pst-hero__drops { --drop: 60px; }
  .next { grid-template-columns: minmax(0, 560px) 1fr; align-items: center; column-gap: var(--sp-8); }
  .next > .door-cta { grid-row: span 2; }
}