/* Phone edition: original pixels, restrained bevels, generous touch targets. */
#native-menu-view,#return-phone{display:none}
.titlebar{display:none}
.language-picker{display:none!important}
.controls #new-game-touch{display:none}
.quick-controls{grid-template-columns:1fr}
#ready{backdrop-filter:none;background:#000b}
#start{border-radius:2px;font-family:Tahoma,Verdana,sans-serif}
#paused{backdrop-filter:none}
@media (orientation:landscape) and (max-height:550px){
  body{background:#151515}
  .window{--rail:clamp(112px,20vw,190px);position:relative;padding:0;border:0;background:#151515;display:block;height:100%;width:100%;box-shadow:none}
  .toolbar{position:absolute;left:12px;bottom:10px;width:calc(var(--rail) - 24px);z-index:3;display:grid;grid-template-columns:1fr 1fr;padding:0;border:0;background:none;gap:6px}
  .toolbar #pause{display:none}
  .toolbar button{font-size:10px;min-height:44px;padding:4px;border-radius:2px;background:#282828;color:#ddd;border:1px solid #555;box-shadow:inset 1px 1px #666}
  #sound[aria-pressed=true],#sound[aria-pressed=false],#menu span{color:#ddd}
  .arena{position:absolute;inset:0;min-height:0;display:block;padding:0;background:radial-gradient(ellipse at center,#292929,#101010 75%)}
  #native-menu-view{display:block;position:absolute;top:0;left:var(--rail);width:calc(100% - var(--rail)*2);height:24px;cursor:pointer;image-rendering:auto;z-index:2}
  .table-stage{position:absolute;top:24px;bottom:4px;left:50%;transform:translateX(-50%);width:min(calc(100% - var(--rail)*2),calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px)*365/420));height:auto;max-height:none;aspect-ratio:365/420;overflow:hidden;flex:none}
  #canvas{position:absolute;left:-4000px;top:0;width:600px!important;height:440px!important}
  #table-view{display:block;width:100%;height:100%;touch-action:none}
  .portrait-score{display:block;position:absolute;right:10px;top:36px;width:calc(var(--rail) - 20px);height:auto;aspect-ratio:400/154;padding:0}
  #score-view{display:block;width:100%;height:100%}
  .controls .flipper{top:112px;bottom:80px;width:calc(var(--rail) - 24px);height:auto;min-height:72px;border-radius:3px;border:1px solid #575757;background:linear-gradient(110deg,#343434,#222);box-shadow:inset 1px 1px #737373,inset -1px -1px #111;color:#dedede;font-size:12px;letter-spacing:2px;transform:none}
  .controls .flipper span{color:#dedede;font-size:12px}
  .controls .flipper::after{content:'';position:absolute;left:25%;right:25%;bottom:18%;height:3px;background:#777;box-shadow:0 5px #111}
  .controls .flipper.held{background:#3d526b;box-shadow:inset 2px 2px #111;border-color:#96b4d4}
  #left{left:calc(env(safe-area-inset-left) + 12px)}#right{right:calc(env(safe-area-inset-right) + 12px)}
  .middle-controls{display:contents}
  .controls #launch{right:calc(env(safe-area-inset-right) + 12px);bottom:calc(env(safe-area-inset-bottom) + 10px);width:calc(var(--rail) - 24px);height:56px;min-height:56px;border-radius:3px;font-size:11px;background:linear-gradient(#ddd9c6,#aaa794);color:#222;border-color:#e8e4ce;box-shadow:inset 1px 1px white,inset -1px -1px #666}
  .quick-controls{left:calc(env(safe-area-inset-left) + 12px);top:36px;bottom:auto;width:calc(var(--rail) - 24px);height:48px}
  .controls #pause-touch{height:48px;min-height:48px;background:#292929;color:#ddd;border:1px solid #555;border-radius:2px;box-shadow:inset 1px 1px #666}
  footer{display:none}
  #loading,#ready{z-index:5}
  #ready p{color:#ccc}#ready #start{font-size:18px;padding:18px 30px}
  body.show-nudges .nudge-controls{left:calc(env(safe-area-inset-left) + 12px);right:auto;top:88px;bottom:auto;width:calc(var(--rail) - 24px);display:flex;gap:2px}
  body.show-nudges .nudge-controls button{font-size:9px;min-height:44px;padding:2px}
  body.show-nudges #left{top:140px}
  body.show-nudges .arena{padding:0}
  body.show-nudges .table-stage{width:min(calc(100% - var(--rail)*2),calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px)*365/420))}
  body.classic .table-stage{top:0;bottom:auto;width:calc(100% - var(--rail)*2);height:auto;aspect-ratio:600/440}
  body.classic #canvas{position:static;width:100%!important;height:100%!important}
  body.classic #table-view,body.classic .portrait-score,body.classic #native-menu-view{display:none}
  body.classic #return-phone{display:block;position:absolute;bottom:6px;left:50%;transform:translateX(-50%);min-height:44px;z-index:4;background:#ece9d8;color:#222;border:1px solid #888;font-size:11px;padding:6px 14px}
  dialog{max-height:calc(100dvh - 16px);margin:auto;padding:16px;width:520px}dialog header{margin:-16px -16px 12px}
}
@media (orientation:landscape) and (max-height:550px){
 .portrait-score{top:8px;right:calc((var(--rail) - min(var(--rail) - 20px, 38dvh * 200 / 278))/2);width:min(calc(var(--rail) - 20px),calc(38dvh * 200 / 278));aspect-ratio:200/278}
 #right{top:calc(38dvh + 22px);min-height:64px}
}
@media (orientation:landscape) and (max-height:550px){
 body.classic .table-stage{width:min(calc(100% - var(--rail)*2),calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 52px)*600/440))}
}