/* Integration fixes shared by the standalone route and shadow component. */
:host { display:block; color-scheme:dark; }
body { overflow-wrap:break-word; }
.skip { top:0; transform:translateY(-200%); }
.skip:focus { transform:none; }
.curated-brand, .muda-identity { flex-wrap:wrap; max-width:100%; }
.muda-identity { white-space:normal; }
.muda-type { min-width:0; max-width:100%; }
.muda-type b { overflow-wrap:anywhere; }
header, main, footer { box-sizing:border-box; }
button, a, input, #stage-title { scroll-margin-block:110px; }
header nav { margin-left:0; }
main { height:auto; }
.opening-bottom button { font-size:1rem; }
#brand-opening { width:100%; max-width:none; height:100dvh; max-height:none; margin:0; border:0; padding:0; }
#brand-opening::backdrop { background:#282828; }
#overview { position:relative; grid-column:1/-1; grid-row:1/-1; overflow:visible; }
.map-mode main { min-height:0; }
.map-mode #world { display:none; }
#loading { left:auto; right:4%; max-width:90%; }
dialog { overflow-y:auto; overscroll-behavior:contain; }
dialog h2, dialog h3 { overflow-wrap:anywhere; }
.footnote a { text-decoration:underline; min-height:44px; display:inline-flex; align-items:center; }
@media(max-width:1100px) {
  /* Reserve two label lines, including at 200% text size, above the scene. */
  #shot-label { min-height:3.2em; }
}
@media(max-width:900px) {
  .brand, .brand-baseline, .curated-brand { max-width:100%; }
  header nav { justify-content:flex-start; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; }
}

/* Mobile playback repair v2: fixed frame, decoded layers, no canvas resampling. */
#world{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;isolation:isolate;contain:layout paint;background:#282828}
#world img{position:absolute;inset:0 0 0 36%;width:64%;height:100%;max-width:none;object-fit:contain;object-position:50% 50%;opacity:0;transition:opacity 700ms ease;pointer-events:none}
#world[data-motion="false"] img{transition:none}
.transport #play{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:52px;min-width:164px;padding:12px 20px;border-radius:999px;background:#FEBF12;color:#282828;font-weight:700}
.transport #play span{margin:0}.transport #play svg{flex:none}
#beats button.active::after{content:'→';font-family:Arial,sans-serif}
@media(max-width:1100px){
 main{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto;height:auto;min-height:0;overflow:hidden;overflow-anchor:none}
 #world{position:relative;grid-area:2/1;inset:auto;width:100%;height:auto;aspect-ratio:3/2;min-height:0;max-height:none;align-self:start}
 #world img{inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
 .top-slate{grid-area:1/1}.copy,#chapter,#intro{grid-area:3/1;min-width:0;padding:24px 6%}
 #annotation{grid-area:4/1;min-height:150px;backdrop-filter:none}.scene-bottom{grid-area:5/1}
 .transport{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:12px}
 .transport #play{grid-column:1/-1;justify-self:center;width:min(100%,240px)}
 #time{grid-column:1}#prev{grid-column:2}#count{grid-column:3}#next{grid-column:4}
 #seek{grid-column:1/-1;grid-row:3;width:100%;margin:0}.audio-switches{grid-column:1/-1;justify-content:center}
 #shot-label{min-height:3.2em}#annotation p{min-height:3.2em}
}
@media(prefers-reduced-motion:reduce){#world img{transition:none}}

/* Keep enlarged timer text separate from chapter navigation on phones. */
@media(max-width:600px) {
  .transport { grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr); }
  .transport #play { grid-row:1; }
  #time { grid-area:2/1/3/-1; justify-self:center; }
  #prev { grid-area:3/1; }
  #count { grid-area:3/2; }
  #next { grid-area:3/3; }
  #seek { grid-row:4; }
  .audio-switches { grid-row:5; }
}