/* Phone layout: full-bleed playfield and a compact touch-control strip. */
@media (max-width:700px), (pointer:coarse) and (max-height:600px) {
  html,body{width:100%;overflow-x:hidden}
  main{width:100%;max-width:none;padding:0!important}
  header{margin:0;padding:5px max(8px,env(safe-area-inset-right)) 5px max(8px,env(safe-area-inset-left));gap:6px;min-height:36px;flex-wrap:nowrap}
  .brand{font-size:12px;gap:5px;letter-spacing:.5px;white-space:nowrap}
  header>a:last-child:not(.brand){font-size:9px!important;padding:6px 4px!important}
  .brand .mark{padding:2px 4px}.brand small{display:none}
  .tools{gap:4px;align-items:center}.tools button{padding:7px 5px;font-size:9px}.tools kbd{display:none}
  .cabinet{width:100%;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none;aspect-ratio:16/9}
  .cabinet canvas{object-fit:contain}
  .touch{margin:4px 0 0;padding:5px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:6px;border:0;border-radius:0;min-height:0}
  .touch .dpad{grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,32px);gap:2px}
  .touch .dpad button{font-size:17px;border-radius:5px;box-shadow:0 2px #080c13}
  .pad-center{font-size:14px}.touch-hint{display:none}
  .touch .actions{gap:8px}.touch .actions button{width:54px;height:54px;font-size:9px;border-width:2px;gap:1px;box-shadow:0 3px #090c13,inset 0 2px #ffffff55}
  .touch .actions .jump{width:44px;height:44px;font-size:8px}.touch .actions button span{font-size:17px}
  footer,.bottom{display:none}
  #overlay h1{font-size:clamp(30px,9vw,54px);margin:6px 0}
  #overlay .eyebrow{font-size:8px;letter-spacing:.7px}#overlay #message{font-size:10px;line-height:1.3;margin:5px}
  #overlay .choices{margin:5px;gap:8px}#overlay .choices button{min-height:36px;padding:7px 10px;font-size:10px}#overlay .start-note{display:none}
}
@media (orientation:landscape) and (max-height:600px) {
  main{padding:0!important}header{height:36px;min-height:36px;margin:0;padding:3px max(8px,env(safe-area-inset-right)) 3px max(8px,env(safe-area-inset-left))}
  .cabinet{width:100vw;height:calc(100dvh - 36px);max-height:none;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
  .cabinet canvas{object-fit:contain}
  .touch{position:fixed;bottom:0;left:0;right:0;z-index:4;margin:0;background:transparent;pointer-events:none;padding:5px max(10px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .touch .dpad,.touch .actions button{pointer-events:auto;opacity:.88}
  footer,.bottom{display:none}
}
@media (max-width:380px){.brand{font-size:0}.brand .mark{font-size:14px}.tools button{font-size:8px;padding:6px 4px}.touch .actions{gap:6px}}