/* Result cards remain scrollable when sharing and Chippy's note are present. */
.table-overlay{overflow-y:auto;align-items:safe center}
/* Keep the full table and two-thumb controls together in a phone viewport. */
@media(max-width:640px){
  html{scroll-padding-bottom:80px}
  .topbar{height:58px;min-height:58px;flex-wrap:nowrap;justify-content:space-between;padding:5px max(7px,env(safe-area-inset-left));gap:6px}
  .topbar .brand{width:40px;min-width:40px;min-height:44px;justify-content:center}
  .topbar .brand img{width:34px;height:34px}
  .topbar .brand>span{display:none}
  .topbar nav{flex:1;min-width:0;flex-wrap:nowrap;justify-content:flex-end;gap:4px}
  .topbar button,.topbar #leaderboard-button{flex:0 0 44px;width:44px;min-width:44px!important;min-height:44px;height:44px;padding:0 2px;font-size:8px;line-height:1.25;white-space:normal;letter-spacing:0;border-radius:7px}
  .topbar #pause-button{width:44px}
  .topbar #fullscreen-button,.topbar #help-button{font-size:20px}
  .arcade{padding:6px max(8px,env(safe-area-inset-right)) 20px max(8px,env(safe-area-inset-left))}
  .machine,.inspect-table .machine{width:min(100%,max(230px,calc((100svh - 262px - env(safe-area-inset-bottom)) * .64)));min-width:0;margin-inline:auto;filter:none}
  .backbox{height:104px;grid-template-rows:62px 20px 18px}
  .scoreboard{height:60px;margin-top:1px;grid-template-columns:45px minmax(0,1fr) 56px;gap:4px;padding:2px 5px}
  .backbox-brand img{width:26px;height:23px}
  .backbox-brand strong{font-size:10px}
  .backbox-brand>span{display:none}
  .score-window{container-type:inline-size}
  .score-window>strong{font-size:clamp(13px,16cqw,29px);line-height:31px;letter-spacing:0}
  .led-label{font-size:7px;letter-spacing:1px;line-height:10px}
  .award-line{height:12px;min-height:12px}
  .award-line b{font-size:8px}
  .award-line span{display:none}
  .score-stats small{font-size:6px;line-height:8px;letter-spacing:0}
  .score-stats b{font-size:12px}
  .score-stats .best-line b{font-size:9px}
  .message-content strong{font-size:7px;line-height:10px;letter-spacing:0}
  .backbox-chin{height:18px;padding-inline:5px;gap:4px}
  .backbox-chin>span,.backbox-chin>strong{font-size:6px;letter-spacing:0}
  .table-overlay{padding:10px;overflow-y:auto;align-items:safe center}
  .overlay-card{padding:17px 12px;max-width:320px}
  .overlay-card h2{font-size:27px;margin:10px 0}
  .overlay-card p{font-size:12px;line-height:1.5;margin-bottom:12px}
  .overlay-card>.eyebrow{font-size:8px;letter-spacing:1px}
  .overlay-card>small{font-size:8px;line-height:1.5;margin-top:12px}
  .overlay-card .primary{min-height:46px;font-size:12px;padding:10px}
  #final-score{font-size:28px;margin:8px 0}
  .machine-apron{height:14px;font-size:5px}
  .controls{height:auto;min-height:66px;grid-template-columns:minmax(44px,1fr) 44px minmax(70px,1.3fr) minmax(44px,1fr);padding:6px 4px calc(6px + env(safe-area-inset-bottom));gap:5px;border-radius:0 0 10px 10px}
  .controls button{height:52px;min-height:52px;font-size:11px;padding:0 3px;border-radius:8px}
  .controls button b{font-size:13px}
  .controls #nudge-button{font-size:9px}
  .controls .launch-button{font-size:9px;line-height:1.4;padding-inline:6px}
  .controls kbd{display:none}
  #charge-fill{height:4px}
  .specials{grid-template-columns:minmax(0,1fr);gap:14px;width:min(100%,440px);margin-top:18px}
  .feature-focus{padding:14px}
  .feature-focus>small{font-size:10px}
  .feature-focus p{font-size:12px}
  .instruction-drawer summary,.sound-preview summary{min-height:48px;font-size:11px}
  .drawer-content{grid-template-columns:1fr}
  .feature-menu h3{font-size:12px}
  .feature-menu p{font-size:12px}
  .council-demo{padding:13px}
  .council-demo>span{font-size:10px}
  .council-demo button,.council-demo #rush-button{font-size:12px;min-height:46px}
  .council-demo small,.volume-control small,.sound-preview small{font-size:11px}
  .volume-control{padding:6px 2px}
  .volume-control label,.volume-control output{font-size:11px}
  .volume-control input{height:44px}
  .sound-preview button,.text-button,.score-save-retry,#leaderboard-refresh{min-height:44px;font-size:12px}
  dialog:not(.cws-dialog){max-height:calc(100svh - 24px);overflow-y:auto;padding:26px 18px 18px}
  dialog:not(.cws-dialog) .close-button{width:44px;height:44px}
  #leaderboard-dialog h2{padding-right:30px}
  #leaderboard-list small{font-size:10px}
}
@media(max-width:359px){.topbar #fullscreen-button{display:none}.topbar nav{gap:3px}.topbar #leaderboard-button{font-size:7px}.machine,.inspect-table .machine{width:min(100%,max(230px,calc((100svh - 262px - env(safe-area-inset-bottom)) * .64)))}.controls button{font-size:10px}.controls .launch-button{font-size:8px}}
@media(max-width:950px) and (max-height:500px) and (orientation:landscape){
  .topbar{height:52px;min-height:52px;padding-block:4px}
  .arcade{display:flex;gap:18px;align-items:flex-start;max-width:760px}
  .machine{width:min(42vw,300px);min-width:0}
  .specials{width:min(40vw,300px);min-width:0;margin-top:0}
  .controls{position:sticky;bottom:0;z-index:8;background:#101820f5}
  .topbar h1{display:none}
}