#fullscreen{min-height:44px;flex:none}
#joy{display:none}
#actions,#arrows{display:flex;gap:7px}
#game:is(.expanded,:fullscreen){
  position:fixed;inset:0;z-index:10;background:#090911;
  padding:max(6px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
  overflow:hidden;
}
body:has(#game.expanded){overflow:hidden}
#game:is(.expanded,:fullscreen){display:flex;flex-direction:column}
#game:is(.expanded,:fullscreen) #playfield{flex:1;min-height:0;container-type:size;display:grid;place-items:center}
#game:is(.expanded,:fullscreen) #stage{
  width:min(100%,calc(100cqh * 16 / 9));min-height:0;max-width:100%;
}
#game:is(.expanded,:fullscreen) #stage:has(#panel:not([hidden])){min-height:min(260px,100cqh)}
#game:is(.expanded,:fullscreen) #track{display:none}
#game:is(.expanded,:fullscreen) details{align-self:center;margin-top:2px}
#panel{overscroll-behavior:contain}
@media(pointer:coarse),(max-width:650px){
  main{padding:8px}
  #controls{justify-content:space-between;touch-action:none}
  #controls small,#arrows{display:none}
  #controls button,#options button{min-height:44px}
  #actions{align-items:stretch}
  #action{min-width:100px}
  #joy{
    display:grid;place-items:center;position:relative;width:96px;height:96px;
    border:2px solid #79a4d3;border-radius:50%;background:#111c32;touch-action:none;user-select:none;
  }
  #joy::before{content:"";position:absolute;inset:16px;border:1px solid #526b91;border-radius:50%}
  #joy span{pointer-events:none;width:34px;height:34px;border-radius:50%;background:#78cbee;border:2px solid #d9f7ff;transform:translate(var(--joy-x,0px),var(--joy-y,0px))}
  #fullscreen,#menu{font-size:.79rem}
  #track{display:none}
  #options{display:grid;grid-template-columns:1fr}
  #options button{text-align:left}
  #brief{max-width:calc(100% - 10px)}
  #controls button:active{filter:brightness(1.45)}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:650px){
  #game:is(.expanded,:fullscreen) #controls{
    position:absolute;inset:auto max(9px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left));
    z-index:4;pointer-events:none
  }
  #game:is(.expanded,:fullscreen) #controls>*{pointer-events:auto}
  #game:is(.expanded,:fullscreen):has(#panel:not([hidden])) #controls{visibility:hidden}
  #actions{flex-direction:column}
  #game:is(.expanded,:fullscreen) #joy{background:#111c32bc}
  #game:is(.expanded,:fullscreen) #options{display:flex;flex-wrap:wrap}
}

@media(max-width:370px){#joy{width:78px;height:78px} #action{min-width:0}}