.xp-room-dialogue { position: absolute; inset: 0; z-index: 160; color: #f4eee1; font: 15px/1.85 SimSun, "Songti SC", serif; pointer-events: none; }
.xp-room-dialogue.is-modal { pointer-events: auto; }
.xp-room-dialogue-portrait { position: absolute; left: 2%; bottom: 84px; width: 39%; height: 78%; object-fit: contain; object-position: bottom; image-rendering: auto; pointer-events: none; animation: room-portrait-in .7s ease-out both; }
.xp-room-dialogue-panel { position: absolute; left: 22px; right: 22px; bottom: 20px; min-height: 104px; box-sizing: border-box; padding: 23px 26px 29px; border: 1px solid #e5d9c9; outline: 2px solid #61554e; box-shadow: inset 0 0 0 3px #bbaa9366, 0 3px 10px #0006; background: rgba(38, 34, 33, .88); pointer-events: auto; }
.xp-room-dialogue-name { position: absolute; top: -29px; left: 12px; min-width: 91px; height: 29px; box-sizing: border-box; padding: 1px 17px; border: 1px solid #e5d9c9; background: #574c49ee; font-size: 14px; letter-spacing: 3px; }
.xp-room-dialogue-text { min-height: 44px; white-space: pre-wrap; letter-spacing: 1px; }
.xp-room-dialogue button { font-family: SimSun, "Songti SC", serif; cursor: pointer; }
.xp-room-dialogue-next { position: absolute; bottom: 9px; right: 18px; padding: 1px 5px; border: 0; background: transparent; color: #d9cdbd; font-size: 12px; }
.xp-room-dialogue button[hidden] { display: none; }
.xp-room-dialogue-next:hover { color: white; }
.xp-room-dialogue-skip { position: absolute; right: 18px; top: 16px; padding: 5px 10px; border: 1px solid #c5bca78c; color: #ebe2d3; background: #302c28ba; font-size: 12px; }
.xp-room-dialogue-choices { position: absolute; top: 32%; right: 5%; width: 48%; display: grid; gap: 12px; pointer-events: auto; }
.xp-room-dialogue-choice { padding: 12px 16px; border: 1px solid #d6c6b2; box-shadow: inset 0 0 0 2px #50463e; color: #eee8db; background: #36322cef; font-size: 14px; text-align: left; }
.xp-room-dialogue-choice:hover, .xp-room-dialogue-choice:focus-visible { background: #66584dee; }
.xp-room-dialogue button:focus-visible, .xp-room-document-viewer button:focus-visible { outline: 2px solid #ead1a0; outline-offset: 3px; }
.xp-room-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.xp-room-document-viewer { position: absolute; inset: 0; z-index: 150; background: #12111038; color: #ece9d8; font: 13px SimSun, serif; }
.xp-room-document-heading { position: absolute; top: 25px; left: 24%; width: 52%; text-align: center; letter-spacing: 3px; text-shadow: 0 1px 3px #000; }
.xp-room-document-content { position: absolute; left: 24%; width: 52%; top: 58px; bottom: 76px; display: flex; align-items: center; justify-content: center; }
.xp-room-document-content > img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: auto; filter: drop-shadow(3px 7px 8px #0009); }
.xp-room-document-controls { position: absolute; bottom: 36px; left: 24%; width: 52%; display: flex; align-items: center; justify-content: center; gap: 9px; }
.xp-room-document-controls button { min-width: 64px; height: 25px; padding: 0 8px; color: #302d28; background: #e6deca; border: 1px solid #9c9281; box-shadow: inset 1px 1px #fff9, inset -1px -1px #7c7264; font: 12px SimSun, serif; cursor: pointer; }
.xp-room-document-controls button:disabled { opacity: .45; cursor: default; }
.xp-room-document-controls button[hidden] { display: none; }
.xp-room-diary-page {
  position: relative;
  width: 320px;
  height: 420px;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 36px 25px 30px 39px;
  color: #344d73;
  background: linear-gradient(90deg, #dce1d7, #faf9ef 15px, #faf9ef);
  border: 1px solid #bfc9c9;
  border-left: 6px solid #7594a4;
  box-shadow: 2px 1px #e4e4d8, 3px 2px #a1b2b6, 4px 4px #e4e4d8, 6px 7px 10px #0006;
  font: 16px/28px KaiTi, STKaiti, SimSun, serif;
}
.xp-room-diary-page::before {
  content: "";
  position: absolute;
  left: 29px;
  top: 12px;
  bottom: 14px;
  border-left: 1px solid #c690905c;
}
.xp-room-diary-date { margin-bottom: 21px; text-align: right; font-size: 15px; }
.xp-room-diary-writing {
  min-height: 252px;
  background: repeating-linear-gradient(transparent 0 27px, #8cb5cf70 27px 28px);
}
.xp-room-diary-line { min-height: 28px; overflow-wrap: break-word; }
.xp-room-diary-folio { display: block; padding-top: 11px; color: #8797a2; text-align: center; font: 10px/16px SimSun, serif; }
.xp-diary-book { position: relative; width: 221px; height: 329px; flex-shrink: 0; perspective: 900px; filter: drop-shadow(6px 8px 8px #0008); }
.xp-diary-cover { position: absolute; inset: 0; background: url(../assets/room/documents/diary-cover.png) center/100% 100%; border: 1px solid #638499; border-radius: 4px 7px 7px 4px; box-shadow: 2px 1px #faf9ee, 3px 2px #afbebf, 5px 3px #eeeee1, 6px 3px #7692a4; transform-origin: left center; }
.xp-diary-spine { position: absolute; left: 16px; top: 2px; bottom: 2px; border-left: 1px solid #5d83974d; }
.xp-diary-strap { position: absolute; width: 61px; right: -13px; top: 167px; height: 26px; background: #8dafc2; border: 1px solid #587e96; box-shadow: inset 0 2px #bed6e0, inset 0 -2px #6b94ab, 0 2px 3px #0005; }
.xp-diary-lock { position: absolute; right: -24px; top: 130px; width: 101px; box-sizing: border-box; padding: 6px 6px 5px; border: 1px solid #7c888d; border-radius: 4px; background: linear-gradient(100deg, #d6dbdc, #b8c1c5 78%, #d1d6d7); box-shadow: inset 1px 1px #fff, inset -1px -1px #8a969c, 2px 3px 4px #0006; font-family: Tahoma, SimSun, serif; }
.xp-diary-lock::before, .xp-diary-lock::after { content: "−"; position: absolute; top: 4px; font-size: 8px; color: #79888d; }
.xp-diary-lock::before { left: 4px; } .xp-diary-lock::after { right: 4px; }
.xp-diary-dots { display: flex; justify-content: center; gap: 5px; margin: 5px 0 7px; }
.xp-diary-dot { width: 5px; height: 4px; border: 1px solid #788990; background: #e4e9e6; box-shadow: inset 1px 1px 1px #0003; }
.xp-diary-dot.is-set { background: #3e5667; }
.xp-diary-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 3px; }
.xp-diary-key { width: 15px; height: 20px; padding: 0; border: 1px solid #839ba8; border-radius: 2px; background: #e1ebed; color: #384e5c; box-shadow: inset 1px 1px #fff, 0 1px #738793; font: 10px Tahoma, sans-serif; cursor: pointer; }
.xp-diary-key:hover { background: #f4f9fa; border-color: #527b92; }
.xp-diary-key:active, .xp-diary-key.is-pressed { transform: translateY(1px); box-shadow: inset 1px 1px 2px #687f8b; background: #a1b9c5; }
.xp-diary-release { width: 100%; margin-top: 8px; padding: 4px 1px; border: 1px solid #7d8e97; border-radius: 2px; background: #d8e1e3; box-shadow: inset 1px 1px #fff9, 0 1px #778790; color: #344c5a; font: 10px SimSun, serif; cursor: pointer; }
.xp-diary-release:hover { background: #eef4f5; }
.xp-diary-release:active { transform: translateX(1px); box-shadow: inset 1px 1px #7e929c; }
.xp-diary-reset { display: block; margin: 4px auto 0; padding: 1px 4px; background: transparent; border: 0; color: #526d7d; font: 10px SimSun, serif; cursor: pointer; }
.xp-diary-reset:hover { color: #163d58; text-decoration: underline; }
.xp-diary-caption { display: block; color: #5b727e; font: 8px SimSun, serif; letter-spacing: 1px; text-align: center; text-shadow: 0 1px #fff8; }
.xp-diary-book.is-wrong { animation: room-lock-shake .28s linear; }
.xp-diary-book.is-wrong .xp-diary-dot { background: #8c4940; }
.xp-diary-book.is-opening .xp-diary-lock, .xp-diary-book.is-opening .xp-diary-strap { transform: translateX(60px) rotate(8deg); opacity: 0; transition: transform .4s, opacity .4s; }
.xp-diary-book.is-opening .xp-diary-cover { transform: rotateY(-78deg); transition: transform .7s .1s ease-in; }
@keyframes room-portrait-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes room-lock-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .xp-room-dialogue-portrait, .xp-diary-book { animation: none !important; } .xp-diary-book * { transition: none !important; } }