@media(min-width:701px) and (min-height:551px){
  /* The desktop table follows height, but never wider than the available viewport.
     Without this cap a portrait tablet could create a horizontal page overflow. */
  .window{width:min(940px,calc(100vw - 48px),calc((100dvh - 300px) * 600 / 440 + 24px));min-width:min(480px,calc(100vw - 48px))}
}
@media(orientation:portrait) and (max-width:700px){
  body{height:100dvh;min-height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#172332;overflow:hidden}
  .window{height:100%;width:100%;border:0;border-radius:0;display:flex;flex-direction:column;box-shadow:none}
  .titlebar{height:52px;min-height:52px;padding:0 16px;gap:10px}
  h1{font-size:17px}.orb{width:23px;height:23px}.edition{font-size:7px;letter-spacing:1.5px}
  .toolbar{padding:5px 10px 8px;gap:8px;flex-shrink:0}
  .toolbar button{font-size:12px;min-height:44px;padding:8px}
  .arena{flex:1;min-height:0;padding:7px 8px;gap:0;justify-content:center}
  .portrait-score{display:block;width:var(--portrait-width,365px);max-width:100%;height:auto;aspect-ratio:400/154;flex-shrink:0;padding-bottom:4px}
  #score-view{display:block;width:100%;height:100%;object-fit:contain}
  .table-stage{width:var(--portrait-width,365px);max-width:100%;height:auto;flex-shrink:0;aspect-ratio:365/420}
  #canvas{position:absolute;width:600px!important;height:440px!important;left:-2000px;top:0}
  #table-view{display:block;width:100%;height:100%;touch-action:none}
  .controls{gap:10px;padding:14px 12px 5px;flex-shrink:0}
  .flipper{min-height:98px}.flipper span{font-size:12px;margin:0 2px}
  .controls button{font-size:12px}.controls small{font-size:9px}.flipper small{display:none}
  .controls #new-game-touch{min-height:36px;font-size:10px}
  .controls #launch{min-height:54px}
  footer{font-size:8px;padding:10px 6px 12px;min-height:28px;flex-shrink:0}
  body.classic .portrait-score,body.classic #table-view{display:none}
  body.classic .table-stage{width:100%;height:auto;aspect-ratio:600/440}
  body.classic #canvas{position:static;width:100%!important;height:100%!important}
}
@media(orientation:portrait) and (max-height:700px){
  /* Protect playfield size when browser chrome leaves a short portrait viewport. */
  :root{--portrait-width:min(365px,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 204px) * 365 / 560))}
  .titlebar{height:34px;min-height:34px}.toolbar{padding:2px 7px 3px;gap:6px}.toolbar button{min-height:38px;font-size:11px;padding:6px}
  .controls{padding:7px 9px 3px;gap:7px}.flipper{min-height:84px}
  .controls #launch{min-height:42px}.controls #new-game-touch,.controls #pause-touch{min-height:44px;font-size:11px;line-height:1.05}
  footer{display:none}
}
@media(orientation:landscape) and (max-height:550px){
  body{height:100dvh;min-height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden}
  .window{height:100%;width:100%;border:0;border-radius:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:48px 1fr 22px}
  .titlebar{height:48px;padding:0 14px;background:var(--panel)}
  h1{font-size:15px}.orb{width:21px;height:21px}.edition{display:none}h1 span{font-size:7px}
  .toolbar{padding:4px 10px;gap:6px}.toolbar button{min-height:40px;font-size:11px;padding:6px}
  .arena{grid-column:1/-1;grid-row:2;min-height:0;padding:4px 112px}
  .table-stage{height:100%;width:auto;max-width:100%;aspect-ratio:600/440}
  .controls{display:contents}
  .controls .flipper{position:fixed;z-index:2;bottom:max(36px,env(safe-area-inset-bottom));width:96px;height:100px;min-height:0;font-size:11px}
  .flipper span{font-size:12px;margin:0 1px}.flipper small{display:none}
  #left{left:max(10px,env(safe-area-inset-left))}#right{right:max(10px,env(safe-area-inset-right))}
  .middle-controls{position:fixed;z-index:2;left:max(10px,env(safe-area-inset-left));top:64px;width:96px;gap:8px}
  .controls #launch{min-height:52px;font-size:11px}.controls #new-game-touch{min-height:36px}
  footer{grid-column:1/-1;grid-row:3;padding:3px 8px;min-height:0;font-size:8px}
}
@media(orientation:landscape) and (max-height:370px){
  .controls .flipper{height:80px;bottom:30px}.middle-controls{top:59px}
}
@media(orientation:portrait) and (max-width:700px){.flipper{min-height:106px}}
@media(orientation:portrait) and (max-height:700px){.flipper{min-height:84px}}
@media(orientation:landscape) and (max-height:370px){.middle-controls{gap:6px}.controls #launch{min-height:46px}}