/* Viewport-driven screen layout. Never scale the page or the finished PNG. */
@media screen {
 body.snapback-flow {min-width:0;}
 body.snapback-flow main {min-width:0;}
 body.snapback-flow :is(.design-panel,.design-preview-card,.collection-library,.collection-selection,.keepsake-panel) {box-sizing:border-box;min-width:0;}
 /* Keep normal laptop/desktop layouts approved above; grow on larger displays. */
 @media(min-width:1921px) and (min-height:900px) {
  body.snapback-flow {--screen-nav-height:clamp(68px,5.5svh,104px);}
  body.snapback-flow .topbar,
  body.snapback-flow header.topbar,
  body.landing-body.snapback-flow #topbar {height:var(--screen-nav-height);min-height:var(--screen-nav-height);flex-basis:var(--screen-nav-height);padding-inline:5vw;}
  body.snapback-flow .topbar .brand-logo {font-size:clamp(22px,1.25vw,38px);}
  body.snapback-flow .topbar .brand-mark {width:clamp(34px,2vw,56px);height:clamp(34px,2vw,56px);}
  body.snapback-flow .topbar .nav {gap:clamp(30px,2.6vw,80px);}
  body.snapback-flow .topbar .nav-link {font-size:clamp(14px,.85vw,24px);}
  /* Home: grow real artwork containers so slot coordinates follow the image. */
  body.landing-body #top {height:calc(100svh - var(--screen-nav-height));min-height:0;}
  body.landing-body #top .hero-inner {width:100%;max-width:none;grid-template-rows:clamp(132px,15svh,260px) minmax(0,1fr);}
  body.landing-body #top .hero-copy {max-width:none;}
  body.landing-body #top .hero-title {font-size:clamp(46px,2.5vw,82px);}
  body.landing-body #top .booth-scene {width:min(100%,36vw);height:100%;max-height:none;}
  body.landing-body #top .booth-artwork {width:min(110%,calc((100svh - 320px)*1312/1199));}
  body.landing-body #top .memory-board {width:min(100%,36.5vw);max-width:none;}
  body.landing-body #top .home-result-card {width:clamp(296px,15.5vw,520px);max-width:none;}
  body.landing-body #top .home-result-preview,
  body.landing-body #top .home-result-card.has-result .home-result-preview {height:clamp(255px,27svh,620px);}
  body.landing-body #top .home-result-card h2 {font-size:clamp(22px,1.25vw,36px);}
  body.landing-body #top .home-wall-actions {gap:clamp(24px,1.5vw,48px);}
  body.landing-body #top .home-wall-actions :is(.home-start-session,#browseTemplatesBtn) {font-size:clamp(13px,.85vw,22px);min-height:clamp(42px,4svh,74px);}
  /* Camera keeps 4:3 proportions and six side thumbnails. */
  body.studio-body .studio {--capture-h:min(60svh,calc(100svh - 400px),calc((100vw - 600px)*.54));--capture-w:calc(var(--capture-h)*4/3);--capture-thumb:clamp(136px,7vw,240px);--capture-gap:clamp(16px,1vw,30px);}
  body.studio-body .camera-view-grid {column-gap:var(--capture-gap);}
  body.studio-body .capture-controls {min-height:110px;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);}
  body.studio-body .capture-controls>.shutter {width:80px;height:80px;min-width:80px;min-height:80px;}
  body.studio-body .shutter-core {width:62px;height:62px;}
  body.studio-body .capture-controls .toggle-btn {font-size:clamp(11px,.7vw,18px);min-width:42px;min-height:40px;}
  body.studio-body .camera-toolbar .camera-pill,
  body.studio-body .capture-counter-value,
  body.studio-body .capture-idle-label {font-size:clamp(12px,.75vw,20px);}
  body.studio-body .studio-shell>.studio-continue-btn {font-size:clamp(13px,.8vw,22px);min-height:clamp(46px,4svh,74px);right:2vw;bottom:2svh;}
  /* Templates stay portrait. More room changes their display size only. */
  body.templates-gallery-body .keepsake-page {max-width:92vw;min-height:calc(100svh - var(--screen-nav-height));}
  body.templates-gallery-body .keepsake-art {max-width:calc(min(49svh,860px)*.32);}
  body.templates-gallery-body .keepsake-heading h1 {font-size:clamp(48px,3vw,84px);}
  body.templates-gallery-body .keepsake-name {font-size:clamp(13px,.8vw,22px);}
  body.template-collection-body .collection-page {max-width:90vw;}
  body.template-collection-body .count-choice-grid {grid-template-columns:repeat(3,clamp(180px,11vw,340px));}
  body.template-collection-body .count-choice-card {width:auto;}
  body.template-collection-body .count-strip-preview {height:clamp(240px,30svh,620px);}
  body.template-collection-body .count-strip-preview--large {height:clamp(300px,38svh,800px);}
  /* Editor: full strip + horizontal template rail remain contained. */
  body.snapback-flow #selectionScreen {width:min(88vw,2200px);}
  body.snapback-flow #designScreen,
  body.snapback-flow #designScreen.is-text-tab {width:min(88vw,2400px);height:calc(100svh - var(--screen-nav-height) - 38px);}
  body.snapback-flow #designScreen .design-heading {flex-basis:clamp(60px,6svh,110px);}
  body.snapback-flow #designScreen [data-design-panel="text"] .text-options {max-width:100%;}
  body.snapback-flow #designScreen .design-layout {gap:clamp(22px,1.5vw,44px);}
  /* Result: enlarge real stall/strip boxes, retaining the 8:25 image ratio. */
  body.result-body {--result-art-height:min(76svh,calc(100svh - 260px),1500px);}
  body.result-body .result-layout {grid-template-columns:calc(var(--result-art-height)*1.0942469) calc(var(--result-art-height)*.32) clamp(216px,13vw,400px);gap:clamp(20px,1.2vw,40px);}
  body.result-body .result-card {width:100%;padding:clamp(18px,1.3vw,36px);gap:clamp(12px,1svh,24px);}
  body.result-body .result-heading {font-size:clamp(32px,2vw,56px);}
  body.result-body .result-card .result-actions :is(.primary-btn,.secondary-btn),
  body.result-body .result-card .pin-wall-btn {font-size:clamp(12px,.75vw,20px);min-height:clamp(40px,4svh,68px);}
  body.result-body .result-card :is(.result-caption,.result-menu summary,.result-home-link) {font-size:clamp(11px,.7vw,18px);}
  body.how-it-works-page .how-content {width:min(78vw,1800px);}
  body.how-it-works-page .how-heading h1 {font-size:clamp(44px,2.6vw,74px);}
 }
 /* Short and narrow viewports may scroll naturally; do not conceal content. */
 @media(max-width:760px) {
  body.snapback-flow {height:auto;min-height:100svh;overflow-y:auto;}
  body.snapback-flow .shell {max-width:100%;min-width:0;}
  body.snapback-flow #selectionScreen .strip-order-tray {max-width:100%;}
  body.snapback-flow #designScreen .template-gallery {max-width:100%;overflow-x:auto;}
 }
 @media(max-height:650px) {
  body.snapback-flow {height:auto;min-height:100svh;overflow-y:auto;}
 }
}