/* Each collection belongs to its physical object. */
.collection-room .room-detail { background: transparent; border: 0; box-shadow: none; }
.collection-room[data-active="reading"] .room-detail { inset: auto 24px 22px auto; width: auto; max-width: calc(100% - 48px); overflow: visible; }
.room-reading-access { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding: 0; background: transparent; }
.room-reading-access button { min-height: 44px; padding: 9px 15px; color: #e9eeee; background: #151a1dcf; border: 1px solid #ffffff30; border-radius: 3px; font: 13px/1.5 var(--font-sans); cursor: pointer; }
.room-cinema.room-surface { background: #0b1017; color: #f1f3f7; padding: 26px; font-family: var(--font-sans); }
.room-cinema.is-projected { padding: 40px 48px; display: block; overflow: auto; scrollbar-color: #454c58 #0b1017; }
.room-cinema.is-projected[data-view="library"] { display: flex; flex-direction: column; overflow: hidden; }
.room-cinema.is-projected[data-view="library"] .cinema-library { min-height: 0; flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; gap: 24px; align-content: start; overflow-y: auto; overscroll-behavior: contain; }
.room-cinema.is-projected .cinema-poster { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; }
.room-cinema.is-projected .cinema-poster-image { height: auto; min-height: 0; aspect-ratio: 2/3; }
.cinema-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.cinema-label { font-size: 27px; font-weight: 500; }
.cinema-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 690px; }
.cinema-poster { border: 0; padding: 0; min-width: 0; text-align: left; color: inherit; background: transparent; cursor: pointer; }
.cinema-poster-image { display: block; width: 100%; height: 355px; object-fit: cover; border-radius: 5px; box-shadow: 0 10px 25px #0005; transition: filter 180ms, transform 180ms; }
.cinema-poster:hover .cinema-poster-image { transform: translateY(-4px); filter: brightness(1.1); }
.cinema-poster-title { display: block; padding-top: 12px; font-size: 23px; line-height: 1.3; overflow-wrap: anywhere; }
.cinema-poster small { display: block; color: #95a3b7; font-size: 15px; margin-top: 5px; }
.cinema-back { padding: 0 8px 12px 0; min-height: 44px; border: 0; background: none; color: #b8c6d7; font: 18px/1.4 var(--font-sans); cursor: pointer; }
.cinema-detail { display: grid; grid-template-columns: 195px minmax(0, 1fr); gap: 28px; }
.cinema-detail-poster { width: 100%; height: 270px; object-fit: contain; border-radius: 3px; }
.cinema-copy { min-width: 0; }
.cinema-copy h3 { margin: 0 0 13px; color: #f5f7fa; font: 500 29px/1.25 var(--font-sans); overflow-wrap: anywhere; }
.cinema-facts { margin: 0 0 18px; font-size: 15px; line-height: 1.65; color: #b1c0d2; }
.cinema-synopsis { margin: 0 0 12px; font: 17px/1.75 var(--font-sans); color: #dee5ed; }
.cinema-source { color: #a6c9df; font-size: 14px; }
.cinema-reviews { margin-top: 24px; padding-top: 17px; border-top: 1px solid #fff2; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.cinema-review { margin: 0; border: 0; padding: 0; }
.cinema-review p { margin: 0 0 7px; font: 17px/1.6 var(--font-serif); color: #e1e5ec; }
.cinema-review a { color: #98a9bd; font: 13px/1.5 var(--font-sans); }
.room-record-crate.room-surface { padding: 17px 19px; background: #0b0e13ed; color: #ebeff6; border: 1px solid #ffffff1a; border-radius: 3px; box-shadow: 0 10px 32px #0003; }
.collection-room[data-active="music"] .room-detail { width: min(360px, 38%); }
.record-crate-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 19px; font: 14px/1.5 var(--font-sans); }
.record-crate-rack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; max-height: min(38vh, 360px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 5px 4px; scrollbar-width: thin; scrollbar-color: #556070 transparent; }
.record-crate-item { min-width: 0; text-align: center; }
.record-disc { display: block; position: relative; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid #e3e7ee88; border-radius: 50%; background: conic-gradient(#c6d7df,#525457,#f7dce1,#6092a3,#e2e7eb,#c6d7df); box-shadow: 2px 5px 8px #0009, inset 0 0 0 3px #c3cdd688; overflow: hidden; cursor: grab; touch-action: none; transition: transform 170ms; }
.record-disc:hover { transform: translateY(-4px) rotate(-8deg); }
.record-disc:active { cursor: grabbing; }
.record-disc[aria-pressed="true"] { box-shadow: 0 0 0 2px #a4cfdd, 2px 5px 8px #0009; }
.record-disc-art { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; opacity: .96; }
.record-disc::after { content: ''; position: absolute; inset: 0; border: 3px solid #ffffff65; border-radius: 50%; background: linear-gradient(120deg,transparent 22%,#ffffff36 42%,transparent 49%,#a7d9e526 68%,transparent 82%); pointer-events: none; }
.record-disc-hole { position: absolute; z-index: 1; inset: 42%; border: 5px solid #cad5dfb5; border-radius: 50%; background: #13171e; box-shadow: 0 0 0 1px #606f7b; }
.record-caption { display: block; margin-top: 10px; color: #bfc8d6; font: 11px/1.5 var(--font-sans); overflow-wrap: anywhere; }
.record-disc.is-lifted { opacity: .3; }
.record-drag-ghost { position: fixed; width: 115px; height: 115px; transform: translate(-50%,-50%) rotate(-12deg); z-index: 10000; pointer-events: none; box-shadow: 10px 15px 18px #0006; }
.record-drag-ghost.is-over-player { box-shadow: 0 0 0 3px #b4d6db, 10px 15px 18px #0006; }
.record-playback { border-top: 1px solid #fff2; margin-top: 18px; padding-top: 15px; }
.record-now-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 12px/1.6 var(--font-sans); }
.record-now-title span { font-size: 10px; color: #b6c2d2; }
.record-play-controls { display: flex; gap: 16px; }
.record-play-controls button { padding: 7px 0; min-height: 44px; background: none; border: 0; color: #dbe8ed; font: 12px/1.4 var(--font-sans); cursor: pointer; }
.record-status { margin: 0 0 8px; font: 11px/1.6 var(--font-sans); color: #a7b7cb; }
.record-audio { width: 100%; margin-top: 10px; }
.room-open-book { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 40px; box-sizing: border-box; border: 0; background: transparent; overflow: auto; overscroll-behavior: contain; color: #342e25; }
.room-open-book[open] { display: grid; place-items: center; }
.room-open-book::backdrop { background: #080b1075; backdrop-filter: blur(3px); }
.open-book-volume { position: relative; width: min(1050px, 100%); filter: drop-shadow(0 18px 35px #0006); animation: book-arrive 420ms ease-out; }
.open-book-spread { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); perspective: 8000px; background: #fffdf6; border: 8px solid #1c443f; border-radius: 4px 8px 8px 4px; box-shadow: 0 5px #cecbbb, 0 7px #9f9c8e, 0 10px #22423c; }
.open-book-page { position: relative; box-sizing: border-box; min-height: 480px; padding: 40px 42px 35px; color: #342e25; background: #fffdf6; cursor: pointer; }
.open-book-page--left { box-shadow: inset -22px 0 28px -22px #6c5a3f80; border-right: 1px solid #c4bba8; }
.open-book-page--right { box-shadow: inset 22px 0 28px -22px #6c5a3f80; }
.open-book-leaf { position: absolute; inset-block: 0; width: 50%; z-index: 1; pointer-events: none; transform-style: preserve-3d; }
.open-book-leaf--forward { left: 50%; transform-origin: left center; }
.open-book-leaf--backward { left: 0; transform-origin: right center; }
.open-book-leaf-face { position: absolute; inset: 0; overflow: hidden; background: #fffdf6; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.open-book-leaf-face--back { transform: rotateY(180deg); }
.open-book-leaf-face > .open-book-page { width: 100%; height: 100%; min-height: 0; }
.open-book-turning-page { position: absolute; inset-block: 0; width: 50%; z-index: 1; pointer-events: none; overflow: hidden; backface-visibility: hidden; }
.open-book-turning-page.open-book-page--left { left: 0; }
.open-book-turning-page.open-book-page--right { right: 0; }
.open-book-running-title { display: block; margin-bottom: 26px; color: #8b806e; font: 10px/1.4 var(--font-sans); letter-spacing: .08em; }
.open-book-kicker { font: 12px/1.6 var(--font-sans); color: #83745a; }
.open-book-page h3 { font: 500 30px/1.3 var(--font-serif); margin: 15px 0 28px; }
.open-book-page p { font: 15px/1.9 var(--font-serif); margin: 0 0 17px; }
.open-book-source { color: #496451; font: 13px/1.6 var(--font-sans); }
.open-book-page-number { position: absolute; bottom: 15px; left: 0; right: 0; text-align: center; color: #8b806e; font: 10px/1.4 var(--font-serif); }
.open-book-page:has(.open-book-page-image) { padding: 0; min-height: 0; }
.open-book-page:has(.open-book-page-image) :is(.open-book-running-title,.open-book-page-number) { display: none; }
.open-book-page-image { display: block; width: 100%; height: min(70vh, 720px); object-fit: contain; }
.open-book-controls { display: flex; justify-content: center; align-items: center; gap: 12px 25px; flex-wrap: wrap; padding: 20px 10px 0; color: #edf1ef; }
.open-book-controls button, .open-book-controls a { color: inherit; background: #0c151bcc; border: 1px solid #ffffff30; border-radius: 3px; min-height: 44px; padding: 8px 14px; font: 12px/1.5 var(--font-sans); cursor: pointer; text-decoration: none; box-sizing: border-box; }
.open-book-controls button:disabled { opacity: .35; cursor: default; }
.open-book-jump, .open-book-jump label { display: inline-flex; align-items: center; gap: 7px; margin: 0; white-space: nowrap; font: 12px/1.5 var(--font-sans); }
.open-book-jump-input { box-sizing: border-box; width: 64px; min-height: 44px; padding: 7px; border: 1px solid #ffffff55; border-radius: 3px; background: #0c151bcc; color: #edf1ef; font: 14px/1.5 var(--font-sans); text-align: center; }
.open-book-jump-input::placeholder { color: #bac7c4; opacity: 1; }
.open-book-controls :is(button,input):focus-visible { outline: 2px solid #b6e2d6; outline-offset: 3px; }
.open-book-feedback { min-height: 1.5em; margin: 8px 0 0; color: #d4ddd9; text-align: center; font: 12px/1.5 var(--font-sans); }
.open-book-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes book-arrive { from { opacity: 0; transform: translateY(25px) scale(.93); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .collection-room[data-active="reading"] .room-detail { inset: auto; width: 100%; max-width: none; padding: 12px 0; }
  .room-reading-access { justify-content: center; }
  .collection-room[data-active="music"] .room-detail { width: 100%; }
  .room-record-crate.room-surface { padding: 20px; }
  .record-crate-rack { gap: 25px; max-width: 340px; margin-inline: auto; }
  .record-disc { touch-action: pan-y; }
  .record-caption { font-size: 12px; }
  .record-crate-header, .record-now-title { font-size: 15px; }
  .record-status, .record-now-title span { font-size: 12px; }
  .room-cinema.room-surface { padding: 22px 18px; }
  .cinema-label { font-size: 22px; }
  .cinema-library { gap: 18px; }
  .cinema-poster-image { height: auto; aspect-ratio: 2/3; }
  .cinema-poster-title { font-size: 17px; }
  .cinema-detail { grid-template-columns: 90px minmax(0,1fr); gap: 17px; }
  .cinema-detail-poster { height: auto; aspect-ratio: 2/3; }
  .cinema-copy h3 { font-size: 21px; }
  .cinema-facts { font-size: 12px; margin-bottom: 12px; }
  .cinema-synopsis { font-size: 14px; line-height: 1.7; }
  .cinema-reviews { grid-template-columns: 1fr; gap: 16px; }
  .cinema-review p { font-size: 15px; }
  .room-open-book { padding: 28px 14px; }
  .open-book-spread { grid-template-columns: 1fr; border-width: 5px; }
  .open-book-page { min-height: 380px; padding: 30px; }
  .open-book-page--right { display: none; }
  .open-book-turning-page { width: 100%; }
  .open-book-page-image { height: auto; max-height: 70dvh; }
  .open-book-controls { gap: 8px; padding-top: 16px; }
  .open-book-controls button, .open-book-controls a { padding: 8px 10px; }
  .open-book-jump { justify-content: center; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .open-book-volume, .record-disc, .cinema-poster-image { animation: none; transition: none; }
}