body[data-stage="reveal"] .sheet{height:auto!important;aspect-ratio:16/9;background:#c7e7dc;overflow:hidden}
body[data-stage="reveal"] #movie{display:block;width:100%;height:auto;max-height:none;aspect-ratio:16/9;object-fit:fill}
body[data-stage="reveal"] .sheet:before,body[data-stage="reveal"] .sheet:after{display:none}
.world-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.world-actions .btn{padding:12px 9px;margin:0;min-height:48px}.world-actions #record{grid-column:1/-1}
#autumnLabel{font-size:13px;font-weight:500}#worldDescription{font-size:13px}#sendWorldVideo{grid-column:1/-1}

body[data-stage=world] .workspace{align-items:center!important}body[data-stage=world] .aside{align-self:center!important}body[data-stage=world] #world{margin:0!important}
#worldEnding{position:absolute;inset:0;z-index:5;background:#fff9efbd;display:flex;align-items:center;justify-content:center;align-content:center;flex-wrap:wrap;gap:12px;padding:16px}#worldEnding[hidden]{display:none}#worldEnding p{width:100%;text-align:center;color:#365c59;font-weight:700;margin:0 0 10px}#worldEnding .btn{width:auto;min-width:100px;margin:0;padding:12px 18px}#worldEnding #sendWorldVideo{flex-basis:100%}.world-actions{display:block}


body[data-stage=verify] #undoPaper:not([hidden]),body[data-stage=verify] #frameDrawing:not([hidden]){display:block!important}body[data-stage=verify] #undoPaper[hidden],body[data-stage=verify] #frameDrawing[hidden],body[data-stage=verify] #confirm[hidden],body[data-stage=verify] #cleanVerify[hidden]{display:none!important}


@media(min-width:701px){body .workspace,body[data-stage] .workspace{align-items:center!important}body[data-stage] .aside{align-self:center!important}body[data-stage] .aside>section{margin-top:0;margin-bottom:0}}


@media(min-width:701px){body[data-stage] .workspace{align-items:stretch!important}body[data-stage] .aside{align-self:stretch!important;display:flex;flex-direction:column;justify-content:center;min-height:var(--player-panel-height,360px)}body[data-stage] .aside>section:not(.hidden){min-height:var(--player-panel-height,360px);display:flex;flex-direction:column;justify-content:space-evenly;gap:12px;padding:16px 0}body[data-stage] .aside>section>h2{margin:0 0 8px}body[data-stage] .aside>section>.btn,body[data-stage] .aside>section>.link{margin:0}body[data-stage] .aside>section>p{margin:0!important}body[data-stage] .aside #cropControls{margin:0}body[data-stage] .aside #cropControls p{margin:0 0 12px}body[data-stage] .aside .world-actions{margin:0}body[data-stage] #capture .format-hint{margin:0!important}body[data-stage] #status{margin:8px 0 0}body[data-stage] #status:empty{display:none}}


body[data-stage=verify] #cropControls:not(.hidden){position:relative;top:-14px}


body[data-stage=reveal] .world-actions{display:flex;flex-direction:column;gap:12px}body[data-stage=reveal] .world-actions .btn{margin:0!important;width:100%}


.compact-step-actions{display:flex;flex-direction:column;gap:12px}.compact-step-actions[hidden]{display:none!important}body[data-stage] .compact-step-actions .btn,body[data-stage] .compact-step-actions .link{width:100%;margin:0!important}


body[data-stage=reveal] .aside .sharing-hint{font-size:12px;line-height:1.6;color:#77818b;margin:0;text-align:center}


.video-share-dialog{width:min(440px,calc(100% - 32px));border:1px solid #e6dfd5;border-radius:20px;padding:24px;background:#fffaf3;color:#193b55}.video-share-dialog::backdrop{background:#193b5566}.video-share-dialog h2{font-size:25px;margin-top:0}.video-share-dialog p{font-size:14px;line-height:1.6}


body[data-stage=capture] .aside #capture{justify-content:center;gap:24px;padding:24px 0}body[data-stage=capture] .aside #capture h2{margin:0 0 6px;line-height:1.2}body[data-stage=capture] #capture .upload-guidance{display:flex;flex-direction:column;gap:12px;margin-top:0}body[data-stage=capture] #capture .upload-guidance p{margin:0!important;font-size:14px!important;line-height:1.65!important}body[data-stage=capture] #capture .upload-guidance p:last-child{font-size:12px!important;color:#7a8590}@media(max-width:700px){body[data-stage=capture] .aside #capture{gap:16px;padding:0}}


body[data-stage=verify] .aside .framing-hint{font-size:12px;line-height:1.6;color:#7a8590;margin:0!important}body[data-stage=verify] .aside #verify:has(.framing-hint){justify-content:center;gap:18px}body[data-stage=verify] #verify:has(.framing-hint) h2{margin:0}body[data-stage=verify] #verify:has(.framing-hint) #cropControls{top:0;margin-top:10px!important;padding:18px}body[data-stage=verify] #cropControls>p[hidden]{display:none!important}


/* Consistent right panel: title, readable guidance, compact actions. */
body[data-stage] .aside>section:not(.hidden){justify-content:flex-start!important;gap:16px!important;padding:20px 0!important}body[data-stage] .aside>section>h2{margin:0!important;line-height:1.2}body[data-stage] .aside>section>p:not([hidden]),body[data-stage] .aside .framing-hint,body[data-stage] #capture .upload-guidance p{font-size:15px!important;line-height:1.65!important;color:#77818b!important;margin:0!important}body[data-stage] .aside .compact-step-actions,body[data-stage] .aside .world-actions{gap:12px!important;margin-top:8px!important}body[data-stage] .aside #cropControls{top:0!important;margin-top:8px!important}body[data-stage] #verify>.link,body[data-stage] #world>#backPreview,body[data-stage] #reveal>#changeWorld{margin-top:6px!important}body[data-stage] #capture .upload-guidance{gap:10px;margin-top:0}body[data-stage] .aside .sharing-hint{font-size:15px!important;line-height:1.65!important;color:#77818b!important}@media(max-width:700px){body[data-stage] .aside>section:not(.hidden){padding:6px 0!important;gap:14px!important}}


.save-share-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;width:100%}body[data-stage=reveal] .save-share-row .btn{width:100%;margin:0!important;padding:13px 8px;min-width:0}


body[data-stage=reveal] .save-share-row #record,body[data-stage=reveal] .save-share-row #sideShareVideo{grid-column:auto!important;width:100%}



/* Mobile animation frame fits its landscape canvas */
@media(max-width:700px){
  body[data-stage=reveal] .paper{
    min-height:0!important;
    height:auto!important;
    padding:6px!important;
  }
  body[data-stage=reveal] .sheet{
    min-height:0!important;
    height:auto!important;
    width:100%!important;
    max-width:none!important;
    aspect-ratio:16/9!important;
    padding:0!important;
  }
  body[data-stage=reveal] #movie{
    display:block;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    aspect-ratio:16/9;
    object-fit:contain;
  }
}