@media(max-width:760px),(pointer:coarse) {
  body {
    overscroll-behavior:none;
    overflow:hidden
  }
  .arcade {
    width:min(100%,500px);
    height:100dvh;
    height:100svh;
    min-height:0;
    padding: max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:auto
  }
  header {
    margin:0;
    flex:none;
    min-height:42px
  }
  .brand {
    font-size:16px;
    letter-spacing:1px;
    gap:8px
  }
  .brand img {
    width:30px;
    height:30px
  }
  .brand small {
    font-size:11px;
    letter-spacing:3px
  }
  .top-actions {
    gap:6px
  }
  .top-actions button {
    min-height:38px;
    font-size:12px;
    padding:6px 10px
  }
  .layout {
    display:flex;
    justify-content:center;
    flex:1;
    min-height:0
  }
  .play {
    display:flex;
    flex-direction:column;
    align-self:center;
    width:min(100%,calc((100svh - 300px)*.8667));
    min-width:180px;
    box-shadow:none
  }
  .hud {
    height:48px;
    flex-shrink:0;
    padding:0 9px;
    gap:4px
  }
  .hud div {
    font-size:10px
  }
  .hud strong {
    font-size:15px;
    margin-top:3px
  }
  #lives {
    font-size:13px
  }
  .battle {
    flex:none;
    min-height:0;
    aspect-ratio:416/480
  }
  .status {
    height:30px;
    flex-shrink:0;
    padding:5px 8px;
    font-size:10px
  }
  .signal {
    display:none
  }
  aside {
    display:none
  }
  .touch-controls {
    height:148px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 5px;
    user-select:none;
    -webkit-user-select:none;
    touch-action:none
  }
  .dpad {
    width:144px;
    height:144px;
    display:grid;
    grid-template:repeat(3,48px)/repeat(3,48px)
  }
  .dpad button {
    font-size:20px;
    background:#283a37;
    border:1px solid #4b6158;
    box-shadow:0 3px #111b19;
    border-radius:7px
  }
  .up {
    grid-area:1/2
  }
  .left {
    grid-area:2/1
  }
  .right {
    grid-area:2/3
  }
  .down {
    grid-area:3/2
  }
  .dcenter {
    grid-area:2/2;
    background:radial-gradient(circle,#526958 0 15%,#1e2c29 17% 60%,transparent 62%)
  }
  button.held {
    background:#c99b45!important;
    color:#131b17;
    transform:translateY(2px)
  }
  #fire {
    width:102px;
    height:102px;
    border-radius:50%;
    font-size:45px;
    background:#b94b39;
    border:4px solid #f29d66;
    box-shadow:0 7px #572b29;
    color:#ffecbc;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    line-height:1
  }
  #fire small {
    font-size:12px;
    letter-spacing:2px;
    margin-top:7px
  }
  .touch-tip {
    font-size:12px;
    color:#9da995;
    text-align:center;
    line-height:1.9
  }
  .touch-tip span {
    font-size:10px;
    color:#607967
  }
  h1 {
    font-size:35px;
    margin-top:17px
  }
  .overlay {
    padding:16px
  }
  .overlay p {
    font-size:13px;
    line-height:1.7
  }
  .primary {
    font-size:16px;
    padding:13px 18px;
    margin-top:10px;
    min-width:205px
  }
  .overlay .hint {
    font-size:10px;
    margin-top:18px
  }
  #eyebrow {
    font-size:10px;
    letter-spacing:2px
  }
  .secondary {
    padding:8px 15px;
    margin-top:12px
  }
}
@media(max-height:650px) and (max-width:760px) {
  .touch-controls {
    height:116px
  }
  .dpad {
    width:114px;
    height:114px;
    grid-template:repeat(3,38px)/repeat(3,38px)
  }
  #fire {
    width:85px;
    height:85px
  }
  .play {
    width:min(100%,calc((100svh - 268px)*.8667))
  }
  .overlay .hint {
    display:none
  }
  h1 {
    font-size:28px;
    margin:12px 0 5px
  }
  .overlay p {
    margin:5px 0
  }
}