/* Shared portrait bounds for active legacy players. Native materials and controls remain local. */
body[data-tyb-portrait]{--tyb-portrait-width:min(calc(100vw - 24px),440px);--tyb-portrait-height:calc(var(--tyb-portrait-width) * 16 / 9)}
body[data-tyb-portrait] #app>.game-shell,
body[data-tyb-portrait] #app>.shell{min-height:0;padding:6px 0 24px;display:block;overflow:clip}
body[data-tyb-portrait="original"] #app>.game-shell>.stage,
body[data-tyb-portrait="native-pack"] #app>.shell>.card,
body[data-tyb-portrait="portrait-pack"] main.portrait,
body[data-tyb-portrait="pilot"] #app>.pilot-shell{
  box-sizing:border-box;
  width:var(--tyb-portrait-width);
  max-width:440px;
  height:var(--tyb-portrait-height);
  min-height:0;
  max-height:none;
  margin:0 auto;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,currentColor 35%,transparent) transparent;
}
/* Every original state is rendered inside this same native stage. */
body[data-tyb-portrait="original"] #app>.game-shell>.stage{display:flex;flex-direction:column}
body[data-tyb-portrait="original"] #app>.game-shell>.stage>:not(.visual):not(.intro):not(.content):not(.result){flex-shrink:0}
body[data-tyb-portrait="original"] #app .stage>.intro,
body[data-tyb-portrait="original"] #app .stage>.content,
body[data-tyb-portrait="original"] #app .stage>.result{display:flex;flex-direction:column;flex:1 0 auto;min-height:0}
body[data-tyb-portrait="original"] #app .stage .intro>:not(.visual),
body[data-tyb-portrait="original"] #app .stage .content>:not(.visual){flex-shrink:0}
body[data-tyb-portrait="original"] #app .stage .visual{flex:1 0 auto}
body[data-tyb-portrait="original"] #app .stage .intro>.start{align-self:stretch;justify-content:space-between;margin-top:auto}
/* Native packs retain their header/footer and use the remaining card height for play. */
body[data-tyb-portrait="native-pack"] #app>.shell>.card{display:flex;flex-direction:column}
body[data-tyb-portrait="native-pack"] #app .card>.topline,
body[data-tyb-portrait="native-pack"] #app .card>.time-line,
body[data-tyb-portrait="native-pack"] #app .card>.card-controls{flex-shrink:0}
body[data-tyb-portrait="native-pack"] #app .card>.content{min-height:0;flex:1 0 auto}
body[data-tyb-portrait="native-pack"] #app .card>.content>:not(.visual):not(.result-meme){flex-shrink:0}
/* 061–070 keeps the portrait in the document while #game owns reachable overflow. */
body[data-tyb-portrait="portrait-pack"] main.portrait{overflow:hidden;margin-block:4px 24px}
body[data-tyb-portrait="portrait-pack"] main.portrait>#game{height:100%;min-height:0;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
body[data-tyb-portrait="portrait-pack"] main.portrait>#game>:not(.ending):not(.game-intro):not(.stimulus){flex-shrink:0}
body[data-tyb-portrait="portrait-pack"] main.portrait .game-intro{display:flex;flex-direction:column;flex:1 0 auto;min-height:0}
body[data-tyb-portrait="portrait-pack"] main.portrait .intro-preview{flex:1 0 auto}
body[data-tyb-portrait="portrait-pack"] main.portrait .game-intro>button{flex-shrink:0;margin-top:auto}
body[data-tyb-portrait="portrait-pack"] main.portrait .ending{height:100%;min-height:0;flex:1 0 auto}
body[data-tyb-portrait="portrait-pack"] main.portrait .ending .end-score,
body[data-tyb-portrait="portrait-pack"] main.portrait .ending .end-actions{flex-shrink:0}
body[data-tyb-portrait="portrait-pack"] main.portrait .ending .meme-frame{display:flex;flex-direction:column;flex:1 1 0;min-height:0}
body[data-tyb-portrait="portrait-pack"] main.portrait .ending .meme-frame img{flex:1 1 0;min-height:0;max-height:none;height:100%;aspect-ratio:auto;object-fit:contain}
body[data-tyb-portrait="portrait-pack"] main.portrait .ending .meme-frame figcaption{flex-shrink:0}
/* Results reserve visible actions first; the complete real meme fills the remaining height. */
body[data-tyb-portrait="original"] #app.tyb-result-screen .stage>.content,
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card>.content{flex:1 1 0;min-height:0}
body[data-tyb-portrait="original"] #app.tyb-result-screen .stage .native-result,
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card>.content>.native-result{display:flex;flex-direction:column;flex:1 1 0;min-height:0}
body[data-tyb-portrait="original"] #app.tyb-result-screen .stage .native-result>:not(.outcome-meme),
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card .native-result>:not(.result-meme){flex-shrink:0}
body[data-tyb-portrait="original"] #app.tyb-result-screen .stage .native-result>.outcome-meme,
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card .native-result>.result-meme{display:flex;flex-direction:column;flex:1 1 0;min-height:0;margin:0 0 12px}
body[data-tyb-portrait="original"] #app.tyb-result-screen .stage .native-result>.outcome-meme img,
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card .native-result>.result-meme img{display:block;flex:1 1 0;width:100%;height:100%;min-height:0;max-height:none;object-fit:contain}
body[data-tyb-portrait="original"] #app.tyb-result-screen .stage .native-result>.outcome-meme figcaption,
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card .native-result>.result-meme figcaption{flex-shrink:0}
body[data-tyb-portrait="original"] #app.tyb-result-screen .stage .native-result>h1,
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card .native-result>h1{margin-block:12px 16px}
/* The original robot painting keeps its exact internal 9:16 coordinates. */
body[data-tyb-portrait="pilot"] #app{padding:6px 0 24px}
body[data-tyb-portrait="pilot"] #app>.pilot-shell>.pilot-canvas{width:100%;height:auto;aspect-ratio:9/16}

/* The compact 007 readiness illustration must not paint outside its allotted box. */
body[data-tyb-portrait="original"] #app .shape-07 .intro>.visual{overflow:hidden}

/* Compact result chrome leaves approximately half the portrait for the reaction image. */
body[data-tyb-portrait="original"] #app.tyb-result-screen .game-shell>.stage,
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .shell>.card{padding:16px}
body[data-tyb-portrait="original"] #app.tyb-result-screen .stage>.topline,
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card>.topline{min-height:44px;margin-bottom:6px}
body[data-tyb-portrait="original"] #app.tyb-result-screen .stage>.timerline,
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card>.time-line{min-height:36px;margin:4px 0 6px}
body[data-tyb-portrait="original"] #app.tyb-result-screen .stage .clock,
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card .clock{min-height:36px;height:36px;font-size:26px;line-height:1;padding:2px 8px}
body[data-tyb-portrait="original"] #app.tyb-result-screen .stage .native-result>h1,
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card .native-result>h1{font-size:26px;line-height:1.12;margin:8px 0 10px}
body[data-tyb-portrait="original"] #app.tyb-result-screen .stage .native-result>.replay-row,
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card .native-result>.result-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px;margin:0;padding:0;align-items:stretch}
body[data-tyb-portrait="original"] #app.tyb-result-screen .stage .native-result>.replay-row>*,
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card .native-result>.result-actions>button{min-width:0;min-height:44px;width:100%;margin:0;padding:6px 8px;font-size:14px;line-height:1.15;display:flex;align-items:center;justify-content:center;text-align:center}
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card .native-result>.result-actions>a{grid-column:1 / -1;min-height:32px;margin:0;padding:4px;font-size:14px;line-height:1.2;display:grid;place-items:center}
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card .native-result>.status:empty,
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card .native-result>.share-fallback:empty{display:none;min-height:0;margin:0;padding:0}
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card>.card-controls{min-height:44px;margin-top:4px;padding-top:0}
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card>.card-controls button{min-height:44px;padding-block:4px}
body[data-tyb-portrait="original"] #app.tyb-result-screen .stage .native-result>.outcome-meme figcaption,
body[data-tyb-portrait="native-pack"] #app.tyb-result-screen .card .native-result>.result-meme figcaption{padding:8px 5px 0;line-height:1.3}