/* A short viewport needs a smaller welcome card, with reachable start buttons. */
#start .start-card{box-sizing:border-box;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;min-height:0;overflow:hidden}
#start .start-card>h1,#start .start-actions{flex:0 0 auto}
#start .start-card>p{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
#start .start-actions{margin-top:8px}
.anno-fullscreen-message{position:fixed;z-index:500;left:50%;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);box-sizing:border-box;padding:10px 14px;border:1px solid #d9aa55;border-radius:8px;background:#21150bf5;color:#fff0c8;text-align:center;font:15px/1.4 Georgia,serif;pointer-events:none}
.anno-fullscreen-message[hidden]{display:none!important}
#app.opening-controls #utility .plaque#annoFullscreen{display:block}
@media(orientation:landscape) and (max-height:520px){
  #start{padding:8px;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  #start .start-card{width:min(820px,100%);max-height:calc(100vh - 16px);max-height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)));padding:12px 16px;border-radius:10px}
  #start .start-card h1{margin:0 0 6px;font-size:20px;line-height:1.2}
  #start .start-card p{margin:4px 0;font-size:15px;line-height:1.35}
  #start .start-actions{gap:7px;margin-top:8px}
  #start .start-actions .action{min-height:44px;padding:7px 12px;font-size:15px}
  /* Keep the controls, but spend less height on their surrounding bars. */
  .app>.topbar{min-height:48px;padding:2px max(6px,env(safe-area-inset-right)) 2px max(6px,env(safe-area-inset-left));gap:5px;grid-template-columns:minmax(0,1fr) auto}
  .app>.topbar .brand{font-size:12px}
  .app>.topbar .brand small{display:none}
  .app>.topbar .tools{gap:4px}
  .app>.topbar .tool,.app>.status .action{min-height:44px;padding:6px 9px;font-size:14px;line-height:1.2}
  .app>.status{min-height:48px;padding:2px max(6px,env(safe-area-inset-right)) max(2px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));gap:4px;font-size:14px;grid-template-columns:minmax(0,1fr)}
  .app>.status .status-actions{gap:5px;justify-content:flex-end;min-width:0;overflow-x:auto;touch-action:pan-x}
  .app>.status .status-actions .action{flex:0 0 auto}
  body[data-shop] .shop-workspace{grid-template-columns:minmax(0,1fr) clamp(160px,23vw,220px)}
  .product-panel h2,body[data-shop="groenteboer"] .product-panel h2{padding:6px 8px;margin:0;font-size:15px;line-height:1.2}
  body[data-shop="groenteboer"] .product-panel{padding:6px}
  .product-strip{padding:5px;gap:5px}
  .product-strip button,body[data-shop="groenteboer"] .product-strip button{min-height:44px;padding:7px 8px;font-size:14px;line-height:1.2}
  .app>.keeper-caption{max-height:22dvh;padding:4px 8px;font-size:15px;line-height:1.3}
  #bezoekBeelden header,#bezoekBeelden footer{padding:4px max(8px,env(safe-area-inset-left));gap:8px}
  #bezoekBeelden footer{padding-bottom:max(4px,env(safe-area-inset-bottom))}
  #bezoekBeelden h2{font-size:16px;line-height:1.2}
  #bezoekBeelden button{min-height:44px;padding:6px 11px;font-size:14px}
  #bezoekBeelden figcaption{padding:4px 10px;font-size:13px;line-height:1.2}
  .series-topbar{min-height:36px;padding:4px 8px;font-size:15px;gap:8px}
  .series-topbar #seriesHint{font-size:13px}
  #quickShopBar{width:clamp(150px,20vw,190px);left:max(6px,env(safe-area-inset-left));padding:7px}
  #quickShopBar strong{font-size:13px;margin-bottom:6px}
  .quickShopChoice{min-height:44px;padding:7px 8px;font-size:13px}
  #app.street-shop-panel #stage{left:calc(clamp(150px,20vw,190px) + max(6px,env(safe-area-inset-left)) + 6px)}
  #app.street-shop-panel #caption{left:calc(50% + clamp(75px,10vw,95px));max-width:calc(100vw - 220px);font-size:14px;padding:5px 8px}
}