/* This section shares the salon background and global typography tokens. */
.atmosphere-shell { max-width: 860px; padding-bottom: 40px; }
.cinema-stage { text-align: center; min-width: 0; }
.cinema-stage > h1 { margin: 12px 0 20px; }
.cinema-subtitle { max-width: 370px; margin: 0 auto; color: var(--muted); }
.cinema-state { margin: 38px auto; }
.atmosphere-rooms { margin: 28px auto 0; max-width: 560px; }
.atmosphere-room { width: 100%; display: grid; grid-template-columns: 38% 1fr 24px; align-items: center; text-align: left; gap: 12px; min-height: 170px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.atmosphere-room:nth-child(2) { grid-template-columns: 32% 1fr 24px; padding-left: 18px; }
.atmosphere-object { display: block; transform: rotate(-7deg); }
.atmosphere-room:nth-child(2) .atmosphere-object { transform: rotate(5deg); }
.atmosphere-object img { width: 100%; height: 138px; object-fit: contain; filter: drop-shadow(0 8px 12px #0004); }
.room-arrow { color: var(--gold); }
.cinema-decor { display: block; object-fit: contain; pointer-events: none; }
.cinema-doorway { max-width: 550px; margin: 25px auto; display: grid; grid-template-columns: 30% 1fr; align-items: center; gap: 10px; }
.cinema-door-key { width: 100%; height: 180px; transform: rotate(-13deg); }
.cinema-paths { text-align: left; }
.cinema-path { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 15px; padding: 22px 0; min-height: 72px; border-bottom: 1px solid var(--line); }
.cinema-path .display-md { font: var(--heading-sm); }
.cinema-path > span:last-child { color: var(--gold); }
.cinema-saved { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 20px; color: var(--paper); border-top: 1px solid var(--line); }
.cinema-saved .caption { color: var(--gold); }
.cinema-categories { display: flex; gap: 12px; justify-content: center; margin: 18px 0 24px; }
.cinema-categories button { padding: 12px 5px; min-height: 48px; color: var(--muted); border-bottom: 1px solid transparent; }
.cinema-categories [aria-pressed="true"] { color: var(--paper); border-color: var(--gold); }
.cinema-list { max-width: 660px; margin: auto; }
.cinema-entry { width: 100%; display: grid; grid-template-columns: 90px 1fr 16px; gap: 20px; align-items: center; min-height: 154px; border-bottom: 1px solid var(--line); text-align: left; padding: 14px 0; }
.cinema-entry-art { display: block; width: 90px; aspect-ratio: 2 / 3; }
.cinema-entry-art img { width: 100%; height: 100%; object-fit: contain; }
.cinema-entry-copy { min-width: 0; display: flex; flex-direction: column; gap: 7px; overflow-wrap: anywhere; }
.cinema-entry-copy .caption { color: var(--muted); }
.cinema-entry-copy .cinema-director { color: #c7bda9; }
.entry-arrow { color: var(--gold); }
.cinema-entry--text { grid-template-columns: 1fr 16px; min-height: 132px; }
.cinema-entry-art.miniature-unavailable img { visibility: hidden; }
.eye-collection { position: relative; width: 100%; max-width: 460px; aspect-ratio: .42; container-type: inline-size; margin: 26px auto 8px; }
.eye-object { position: absolute; padding: 6px; min-width: 48px; min-height: 48px; display: block; perspective: 750px; transform: rotate(var(--eye-turn)); transition: opacity .2s, transform .25s; touch-action: manipulation; }
.eye-object.eye-chosen { transform: rotate(var(--eye-turn)) scale(1.045); z-index: 2; }
.eye-object.eye-muted { opacity: .4; }
.eye-rotor { display: block; position: relative; width: 100%; transform-style: preserve-3d; }
.eye-front { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 5px #0005); }
.eye-reverse { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: rotateY(180deg); }
.eye-swapped .eye-front { visibility: hidden; }
.eye-swapped .eye-reverse { display: block; }
.eye-glass { position: absolute; inset: 22% 20%; border-radius: 45%; overflow: hidden; pointer-events: none; transform: translateZ(1px); }
.eye-glint { opacity: 0; width: 100%; height: 100%; object-fit: contain; }
.eye-position-0 { left: 1%; top: 0cqw; width: 45%; --eye-turn: -7deg; }
.eye-position-1 { left: 52%; top: 14cqw; width: 42%; --eye-turn: 8deg; }
.eye-position-2 { left: 6%; top: 44cqw; width: 38%; --eye-turn: 5deg; }
.eye-position-3 { left: 51%; top: 58cqw; width: 43%; --eye-turn: -6deg; }
.eye-position-4 { left: 1%; top: 91cqw; width: 45%; --eye-turn: -4deg; }
.eye-position-5 { left: 52%; top: 98cqw; width: 44%; --eye-turn: 7deg; }
.eye-position-6 { left: 9%; top: 137cqw; width: 33%; --eye-turn: -9deg; }
.eye-position-7 { left: 63%; top: 143cqw; width: 26%; --eye-turn: 6deg; }
.eye-position-8 { left: 1%; top: 186cqw; width: 44%; --eye-turn: 7deg; }
.eye-position-9 { left: 51%; top: 195cqw; width: 45%; --eye-turn: -7deg; }
.movie-reveal { max-width: 310px; margin: 14px auto 12px; animation: cinema-arrive .35s ease both; }
.movie-reveal.has-medallion { width: 100%; max-width: 360px; animation: medallion-arrive .8s ease-out both; }
.movie-medallion { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; }
.medallion-consider { min-height: 48px; margin: 20px auto 4px; }
.movie-window { width: 100%; aspect-ratio: 2 / 3; }
.movie-window img { width: 100%; height: 100%; object-fit: contain; }

.movie-reveal.has-mirror { position: relative; max-width: 480px; width: 100%; aspect-ratio: var(--frame-ratio); }
.has-mirror .movie-window { position: absolute; left: var(--window-left); top: var(--window-top); width: var(--window-width); height: var(--window-height); aspect-ratio: auto; clip-path: var(--window-mask); }
.movie-plane { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: var(--plane-ratio); transform-origin: 0 0; }
.has-mirror .movie-window { background: #13212c; }
.has-mirror .movie-plane img { display: block; object-fit: contain; }
.movie-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.movie-paper { font: var(--caption-medium); color: #493325; padding: 4px 8px; min-height: 44px; line-height: 1.45; text-align: center; overflow-wrap: normal; }
.movie-paper.on-frame { position: absolute; z-index: 1; transform: translate(-50%, -50%) rotate(var(--paper-turn)); display: grid; place-items: center; }
.movie-paper:focus-visible { outline: 2px solid #755232; outline-offset: 3px; border-radius: 3px; }
.movie-paper:hover { color: #7a372b; }
.movie-reveal-return { margin: 8px auto 20px; color: var(--muted); min-height: 44px; }
.cinema-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.movie-material { max-width: 590px; margin: 12px auto 0; padding: 30px 26px; background: #f0e4d0; color: #493325; text-align: left; border-radius: 2px; box-shadow: 0 16px 38px #0002; scroll-margin-top: 24px; }
.movie-material .eyebrow { color: #755232; margin-bottom: 12px; }
.movie-material h1 { overflow-wrap: anywhere; margin-bottom: 14px; }
.movie-original, .movie-director { color: #755746; overflow-wrap: anywhere; }
.movie-director { margin-top: 5px; }
.movie-description { margin-top: 24px; white-space: pre-line; }
.movie-actions { margin-top: 28px; display: flex; flex-direction: column; align-items: stretch; gap: 13px; }
.movie-return { color: #755746; }
body[data-stage^="cinema"] #prop-key { visibility: hidden; pointer-events: none; }
body[data-stage^="cinema"] #deck-choice { visibility: hidden; pointer-events: none; }
@keyframes cinema-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes medallion-arrive { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 650px) {
  .atmosphere-shell { padding-left: 22px; padding-right: 22px; }
  .atmosphere-room { grid-template-columns: 35% 1fr 16px; min-height: 158px; }
  .atmosphere-room:nth-child(2) { padding-left: 0; }
  .atmosphere-room .heading-sm { font: var(--button); }
  .cinema-doorway { grid-template-columns: 26% 1fr; gap: 18px; margin-top: 22px; }
  .cinema-door-key { height: 160px; }
  .cinema-path { gap: 8px; }
  .cinema-entry { grid-template-columns: 72px 1fr 14px; gap: 14px; }
  .cinema-entry-art { width: 72px; }
  .movie-material { padding: 26px 21px; }
  .movie-reveal:not(.has-mirror):not(.has-medallion) { max-width: 245px; }
  .eye-collection { margin-top: 22px; }
}
@media (max-width: 360px) {
  .atmosphere-shell { padding-left: 16px; padding-right: 16px; }
  .cinema-entry { gap: 10px; grid-template-columns: 58px 1fr 12px; }
  .cinema-entry-art { width: 58px; }
  .cinema-categories { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .eye-object { transition: opacity .15s; }
  .eye-object.eye-chosen { transform: rotate(var(--eye-turn)); }
  .eye-glint { display: none; }
  .movie-reveal { animation: cinema-arrive .15s ease both; }
  .movie-reveal.has-medallion { animation: medallion-fade .15s ease both; }
}
@keyframes medallion-fade { from { opacity: 0; } to { opacity: 1; } }

.cinema-exits{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;max-width:600px;margin:22px auto 8px;border-top:1px solid var(--line);padding-top:12px}
.cinema-exits button{min-height:44px;color:var(--muted);font:var(--button)}
.movie-actions{flex-wrap:wrap;max-width:100%;justify-content:center}
.movie-actions button{min-height:44px;max-width:100%;white-space:normal}
.movie-paper.on-frame{font:var(--caption-medium)}
.movie-material h1{overflow-wrap:anywhere}
@media(max-width:365px){.cinema-exits{gap:6px 12px}.movie-paper.on-frame{font:var(--card-caption)}}