/* Hallmark · project-play · original motion, rooms and seasons as selectable experiences */
/* Critique: Interaction leads; each original image retains its aspect ratio without a padded frame. */
:root { --play-tani-paper: #2e211a; --play-tani-ink: #ffedcb; --play-yokai-paper: #b8d8cd; --play-seojeong-spring: #e7edc9; --play-seojeong-summer: #f7dec9; --play-seojeong-autumn: #f3d7a0; --play-seojeong-winter: #dfe9ed; --play-mv-paper: #e8e5db; }
.project-play { margin: 48px 0 80px; }
.project-play img { width: 100%; height: auto; max-height: none; display: block; }
.project-play button { font: inherit; color: inherit; }
.project-play button:focus-visible { outline: 3px solid var(--case-accent,var(--ink)); outline-offset: 4px; }
.play-layout { display: grid; grid-template-columns: minmax(0,.23fr) minmax(0,1fr); gap: 32px; align-items: start; }
.play-text-list { display: flex; flex-direction: column; align-items: stretch; }
.play-text-list button { min-height: 44px; background: var(--transparent); border: 0; border-bottom: 1px solid var(--case-rule,var(--rule)); padding: 12px 0; text-align: left; }
.play-text-list button[aria-pressed=true] { font-weight: 750; text-decoration: underline; text-underline-offset: 8px; }
.play-text-list button:hover { opacity: .7; }
.play-current { font-size: 20px; line-height: 1.5; margin: 20px 0; }
.yokai-stage { position: sticky; top: 88px; }
.yokai-video { width: 100%; height: auto; aspect-ratio: 16/9; display: block; }
.yokai-letters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 16px; }
.yokai-letters button { font-size: 32px; line-height: 1.25; padding: 12px 0; }
.yokai-letters button[data-yokai=all],.yokai-letters button[data-yokai=film] { grid-column: 1/-1; font-size: 16px; }
.room-map { position: relative; background: var(--play-tani-paper); border-radius: var(--radius-media); }
.room-map>img { width: 100%; height: auto; }
.room-hotspots button { position: absolute; left: var(--point-x); top: var(--point-y); transform: translate(-50%,-50%); min-height: 44px; padding: 4px 12px; border: 1px solid var(--play-tani-ink); color: var(--play-tani-ink); background: var(--play-tani-paper); border-radius: 4px; font-size: 14px; }
.room-hotspots button[aria-pressed=true] { background: var(--play-tani-ink); color: var(--play-tani-paper); }
.room-hotspots button:focus-visible { outline-color: var(--play-tani-ink); }
.room-detail { margin-top: 32px; display: grid; grid-template-columns: minmax(0,.25fr) minmax(0,1fr); gap: 32px; align-items: start; }
.room-selected { margin: 0; }
.room-selected figcaption { padding-top: 24px; display: grid; grid-template-columns: minmax(0,.4fr) minmax(0,1fr); gap: 24px; }
.room-selected h3 { font-size: 24px; margin: 0; }
.room-selected p { margin: 0; max-width: 38em; }
.season-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--case-rule,var(--rule)); margin-bottom: 32px; }
.season-tabs button { background: var(--transparent); border: 0; padding: 12px 0 16px; min-height: 48px; font-size: clamp(24px,3vw,40px); flex: 1; text-align: left; }
.season-tabs button[aria-pressed=true] { box-shadow: inset 0 -3px var(--case-ink,var(--ink)); font-weight: 700; }
.season-art { background: var(--play-seojeong-spring); }
.seasons-play[data-season=summer] .season-art { background: var(--play-seojeong-summer); }.seasons-play[data-season=autumn] .season-art { background: var(--play-seojeong-autumn); }.seasons-play[data-season=winter] .season-art { background: var(--play-seojeong-winter); }
.season-footer { margin-top: 32px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; }
.season-footer h3 { margin: 0 0 16px; font-size: clamp(24px,3vw,36px); line-height: 1.35; }
.season-footer p { max-width: 34em; }
.season-package-toggle,.mv-scene-play { min-height: 44px; border: 0; padding: 8px 0; background: var(--transparent); text-decoration: underline; text-underline-offset: 6px; }
.season-package { margin: 0; }
.mv-player { width: 100%; aspect-ratio: 16/9; background: var(--film-paper); border-radius: var(--radius-media); overflow: clip; }
.mv-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.mv-scenes { margin-top: 48px; display: grid; grid-template-columns: minmax(0,.25fr) minmax(0,1fr); gap: 32px; align-items: start; }
.mv-scenes figure { margin: 0; }
@media(max-width:700px) {
 .project-play { margin-block: 32px 56px; }
 .play-layout,.room-detail,.mv-scenes { grid-template-columns: minmax(0,1fr); gap: 20px; }
 .yokai-stage { position: static; }
 .yokai-letters { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
 .yokai-letters button { font-size: 26px; min-width: 32px; }
 .yokai-letters button[data-yokai=all],.yokai-letters button[data-yokai=film] { font-size: 15px; }
 .room-hotspots { display: none; }
 .room-list,.mv-scenes .play-text-list { flex-direction: row; flex-wrap: wrap; gap: 0 20px; }
 .room-list button,.mv-scenes .play-text-list button { font-size: 15px; }
 .room-selected figcaption,.season-footer { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .season-tabs { gap: 16px; margin-bottom: 20px; }
 .season-tabs button { font-size: 24px; }
 .mv-scenes { margin-top: 24px; }
}
@media(prefers-reduced-motion:reduce) { .project-play * { scroll-behavior: auto; } }
.project-play button:active { opacity: .72; }