/* Theatre of Magic — midnight stage, brass footlights. Own file; shared theme sheets untouched. */
body.theatre{--bg:#0d0a17;--paper:#1a1329;--ink:#e6dccb;--muted:#a394ad;--line:#32253f;--line-ui:#7a5aa0;--accent:#c9962b;--accent-ink:#e8b644;--bone:#6c8fa3}
.theatre .opening{border-color:#c9962b}
/* white on this brass accent measures under 4.5:1, so buttons take dark ink on --accent-ink, the same escape Batman uses. */
body.theatre.guide-v3 .button,body.theatre.guide-v3 .opening.cinematic .button{background:var(--accent-ink);color:#141005}
body.theatre.guide-v3 .button:hover{opacity:.85}
body.theatre.guide-v3 .strategy-table th{color:var(--muted);border-bottom-color:var(--ink)}

/* A stage-show rhythm: opening tableau, side-stage illusion, then the multiball finale. */
body.theatre{--theatre-gutter:max(40px,calc((100vw - 1240px)/2 + 40px))}
body.theatre .opening.cinematic{overflow:visible}
body.theatre .opening.cinematic .art{width:100%;max-width:none;height:clamp(430px,67vh,710px);max-height:none;object-fit:cover;margin:0;-webkit-mask-image:linear-gradient(#000 43%,transparent 93%);mask-image:linear-gradient(#000 43%,transparent 93%)}
body.theatre .opening.cinematic .intro{position:relative;margin-top:-120px;padding-top:0}
body.theatre .field-graphic--first-ball-route{position:relative;width:100vw;max-width:none;margin:50px 0 64px calc(50% - 50vw);border:0;border-radius:0;background:none;overflow:hidden}
body.theatre .field-graphic--first-ball-route img{width:100%;height:clamp(430px,70vh,740px);object-fit:cover;object-position:50% 52%}
body.theatre .field-graphic--first-ball-route figcaption{position:absolute;inset:auto 0 0 auto;width:min(48%,640px);padding:90px var(--theatre-gutter) 42px 150px;background:linear-gradient(90deg,transparent,rgba(13,10,23,.96) 34%);font-size:17px}
body.theatre .field-graphic--main-progression{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);width:100vw;max-width:none;margin:100px 0 64px calc(50% - 50vw);border:0;border-radius:0;background:none;align-items:stretch}
body.theatre .field-graphic--main-progression img{grid-column:2;grid-row:1;width:100%;height:clamp(430px,70vh,740px);object-fit:cover;object-position:50% 46%}
body.theatre .field-graphic--main-progression figcaption{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;padding:44px 54px 44px var(--theatre-gutter);font-size:17px}
body.theatre .field-graphic--multiball-flow{position:relative;width:100%;max-width:none;margin:92px 0 46px;border:0;background:none;overflow:visible}
body.theatre .field-graphic--multiball-flow img{display:block;width:100%;height:auto;border-radius:8px}
body.theatre .field-graphic--multiball-flow figcaption{position:relative;width:min(590px,calc(100% - 30px));margin:-82px auto 0 18px;padding:28px 34px;background:var(--paper);border:1px solid var(--line);border-radius:8px;font-size:16px}
@media(max-width:900px){
  body.theatre .opening.cinematic .art{height:clamp(360px,58vh,490px)}
  body.theatre .opening.cinematic .intro{margin-top:-90px}
  body.theatre .field-graphic--first-ball-route img{height:clamp(300px,62vw,470px)}
  body.theatre .field-graphic--first-ball-route figcaption{position:static;width:auto;padding:24px var(--theatre-gutter) 0;background:none}
  body.theatre .field-graphic--main-progression{grid-template-columns:1fr;margin-top:72px}
  body.theatre .field-graphic--main-progression img{grid-column:1;grid-row:1;height:clamp(300px,62vw,470px)}
  body.theatre .field-graphic--main-progression figcaption{grid-column:1;grid-row:2;padding:24px var(--theatre-gutter) 0}
}