/* Small theatrical props; the calendar and score tables stay unobstructed. */
.movie-hero{isolation:isolate;overflow:hidden}
.projector-beam,.cinema-dust{position:absolute;inset:0;pointer-events:none;z-index:0}
.projector-beam{background:conic-gradient(from 142deg at 72% -12%,transparent 0deg,#e9c98512 13deg,#e9c98505 24deg,transparent 37deg);transform-origin:72% 0;opacity:.7}
.cinema-dust{background-image:radial-gradient(circle,#f8deb47a 0 1px,transparent 2px),radial-gradient(circle,#f8deb450 0 1px,transparent 2px);background-size:173px 197px,293px 239px;background-position:20px 25px,110px 90px;opacity:.2;mask-image:linear-gradient(90deg,transparent,#000,transparent)}
.riichi-case{position:absolute;width:190px;height:140px;left:47%;bottom:0;pointer-events:none;transform:translateX(-50%)}
.riichi-case svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(2px 5px 3px #182b3525)}
.case-smoke{opacity:.45;transform-origin:213px 77px}
.atmosphere-toggle{align-self:center;background:transparent;color:inherit;border:1px solid #a4865970;padding:8px 12px;font:inherit;font-size:12px;cursor:pointer}
.atmosphere-toggle:focus-visible{outline:2px solid #cf461b;outline-offset:4px}
.atmosphere-on .in-scene .projector-beam{animation:projector-drift 16s ease-in-out infinite alternate}
.atmosphere-on .in-scene .cinema-dust{animation:dust-drift 24s linear infinite alternate}
.atmosphere-on .in-scene .case-smoke{animation:smoke-drift 7s ease-in-out infinite}
.atmosphere-on .in-scene .riichi-ember{animation:ember-glow 4s ease-in-out infinite alternate}
.atmosphere-on .in-scene .noir-lady-full{animation:portrait-arrive 1.2s ease-out both}
.atmosphere-paused *, .atmosphere-paused *::before,.atmosphere-paused *::after{animation:none!important;transition:none!important}
.atmosphere-paused .noir-reveal{opacity:1;transform:none;filter:none}
@keyframes projector-drift{from{transform:rotate(-7deg);opacity:.35}to{transform:rotate(7deg);opacity:.85}}
@keyframes dust-drift{to{transform:translate3d(-15px,-35px,0);opacity:.32}}
@keyframes smoke-drift{0%{opacity:0;transform:translateY(8px) scaleX(.8)}35%{opacity:.5}100%{opacity:0;transform:translate(-10px,-25px) scaleX(1.2)}}
@keyframes ember-glow{to{stroke:#dc8d4c}}
@keyframes portrait-arrive{from{opacity:0;transform:translateY(22px) rotate(2deg)}to{opacity:1;transform:none}}
@media(max-width:850px){.riichi-case{left:42%;width:140px;height:115px}.noir-interlude::before{max-width:180px;letter-spacing:2px}}
@media(max-width:550px){.riichi-case{left:18%;width:125px}.noir-interlude::before{display:none}.cinema-dust{display:none}}
@media(prefers-reduced-motion:reduce){.projector-beam,.cinema-dust,.case-smoke,.riichi-ember,.noir-lady-full{animation:none!important}}

/* The complete figure has its own column, never overlapping calendar controls. */
#page-new .noir-calendar{display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:34px;align-items:start}
.noir-calendar>.sectiontop,.noir-calendar>.calendar-grid{grid-column:1}
.noir-calendar-lady{grid-column:2;grid-row:1 / span 2;align-self:end;pointer-events:none;max-width:100%;line-height:0}
.noir-lady-full{display:block;width:100%;height:auto;filter:saturate(.85);transform-origin:50% 100%}
@media(max-width:1250px){#page-new .noir-calendar{grid-template-columns:minmax(0,1fr) 290px;column-gap:24px}.noir-calendar .calendar-grid{grid-template-columns:1fr}}
@media(max-width:1000px){#page-new .noir-calendar{grid-template-columns:1fr}.noir-calendar .calendar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.noir-calendar-lady{grid-column:1;grid-row:auto;justify-self:end;width:300px;margin-top:10px}}
@media(max-width:600px){.noir-calendar .calendar-grid{grid-template-columns:1fr}.noir-calendar-lady{justify-self:center;width:min(300px,85%)}.noir-calendar>.sectiontop{flex-wrap:wrap;gap:20px}}