/*
  PLAYRS-DETAIL-V1 (2026-10-30): one page per museum piece and per SIGNAL,
  written by tools/seo/pages.py. Same room language as the SIGNALS page and
  the artifact room (css/playrs-room-v1.css tokens): hairlines, big title,
  off-white on black, red only for the diamond. Light theme follows the room.
  Also styles the RELEASED list on the SIGNALS page.
*/
body[data-store-scope="world"] .room-brand .room-diamond { width: 6px; height: 6px; background: #e3261c; transform: rotate(45deg); flex: none; }
.detail a, .released-list a { color: inherit; text-decoration: none; }
body[data-store-scope="world"] .detail-hero { padding-bottom: 34px; }
body[data-store-scope="world"] .detail-hero .store-eyebrow a:hover,
body[data-store-scope="world"] .detail-hero .store-eyebrow a:focus-visible { color: var(--room-white); }
body[data-store-scope="world"] .detail-hero h1 { overflow-wrap: anywhere; }
body[data-store-scope="world"] .room-hero.detail-hero > p.detail-facts {
  margin: 20px 0 0; max-width: none; font-size: 11px; letter-spacing: .16em; line-height: 1.7; color: var(--room-ink);
}

.detail-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 40px; align-items: start; margin: 0 0 56px; }
.detail-piece { grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); margin-top: 40px; }
.detail-piece .detail-hero { padding-top: 0; }

/* YouTube stays a still until it's tapped (js/playrs-detail-v1.js) */
.detail-video { margin: 0; }
.detail-play, .detail-video iframe {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--room-line);
  background: #000; padding: 0; cursor: pointer; overflow: hidden;
}
.detail-play img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .25s ease; }
.detail-play:hover img, .detail-play:focus-visible img { filter: none; }
.detail-play-mark {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(0,0,0,.45);
}
.detail-play-mark::after {
  content: ""; position: absolute; left: 26px; top: 21px;
  border-left: 16px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.detail-video figcaption { margin-top: 10px; color: var(--room-dim); }

.detail-art { margin: 0; }
.detail-art img { width: auto; max-width: 100%; height: auto; max-height: 82vh; }

.detail-side { display: flex; flex-direction: column; gap: 26px; }
.detail-specs { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--room-line); }
.detail-specs div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--room-line); }
.detail-specs dt { font-size: 10px; letter-spacing: .16em; color: var(--room-dim); }
.detail-specs dd { margin: 0; font-size: 11px; letter-spacing: .12em; text-align: right; color: var(--room-ink); }

.detail-offer { display: flex; flex-direction: column; gap: 8px; padding-bottom: 22px; border-bottom: 1px solid var(--room-line); }
.detail-offer .store-eyebrow { margin: 0; color: var(--room-dim); }
.detail-price { margin: 0; font-size: 22px; letter-spacing: .02em; color: var(--room-white); }
.detail-note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--room-dim); }
.detail-note:empty { display: none; }

.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.detail-actions:empty { display: none; }
.detail-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--room-line-2); font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--room-ink);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.detail-btn:hover, .detail-btn:focus-visible { border-color: var(--room-ink); }
.detail-btn.is-solid { background: var(--room-white); border-color: var(--room-white); color: var(--room-bg); }
.detail-btn.is-solid:hover, .detail-btn.is-solid:focus-visible { background: var(--room-ink); border-color: var(--room-ink); }

.detail-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 0 0 40px; padding: 16px 0; border-top: 1px solid var(--room-line); font-size: 10px; letter-spacing: .16em; color: var(--room-dim); }
.detail-pager a { min-height: 44px; display: inline-flex; align-items: center; }
.detail-pager a:hover, .detail-pager a:focus-visible { color: var(--room-white); }

/* RELEASED list on the SIGNALS page */
.released { margin: 56px 0 64px; }
.released h2 { margin: 0 0 14px; color: var(--room-dim); font-weight: 400; }
.released-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--room-line); }
.released-list a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 110px 20px; align-items: center; gap: 14px;
  min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--room-line); font-size: 11px; letter-spacing: .12em; color: var(--room-ink);
}
.released-list a:hover, .released-list a:focus-visible { background: var(--room-hover); }
.released-list b { font-weight: 700; color: var(--room-white); overflow-wrap: anywhere; }
.rl-n, .rl-meta, .rl-date { color: var(--room-dim); }
.rl-date { text-align: right; }
.rl-go { color: var(--room-dim); text-align: right; }

@media (max-width: 760px) {
  .detail-grid, .detail-piece { grid-template-columns: 1fr; gap: 28px; }
  .detail-art img { width: 100%; max-height: none; }
  .released-list a { grid-template-columns: 36px minmax(0, 1fr) 20px; grid-template-areas: "n t go" "n m go"; row-gap: 4px; }
  .released-list .rl-n { grid-area: n; }
  .released-list b { grid-area: t; }
  .released-list .rl-meta { grid-area: m; }
  .released-list .rl-date { display: none; }
  .released-list .rl-go { grid-area: go; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-play img, .detail-btn { transition: none; }
}