/* A circular aim stick and independent pedals fit both phone orientations. */
.arcade-joystick{flex:none;width:190px;height:190px;min-width:0;min-height:0;display:block;border-radius:50%;padding:0;background:radial-gradient(circle,var(--glass) 0 28%,var(--paper) 29% 31%,var(--glass) 32% 65%,var(--sun) 66%)}
.arcade-joystick .arcade-steer-thumb{width:56px;height:56px;border-radius:50%;font-size:var(--t-button);transform:translate(calc(-50% + var(--stick-x,0)*56px),calc(-50% + var(--stick-y,0)*56px))}
.arcade-stick-guide{position:absolute;inset:var(--s-4);text-align:center;line-height:2.1;color:var(--muted);font-size:var(--t-button);pointer-events:none}
.arcade-stick-label{position:absolute;left:0;right:0;bottom:var(--s-2);text-align:center;font-size:var(--t-tiny);pointer-events:none}
.arcade-secondary-pedals{display:grid;gap:var(--s-2)}
.arcade-secondary-pedals button{width:80px;height:70px;min-height:64px;padding:var(--s-1)}
.arcade-secondary-pedals button span:first-child{font-size:calc(var(--t-button)*1.25);line-height:1}
.arcade-secondary-pedals button span:last-child{line-height:1}
.arcade-pedals .arcade-brake{height:70px}
.arcade-pedals .arcade-handbrake{background:var(--turbo);color:var(--paper)}
.arcade-pedals .arcade-gas{height:148px;width:100px}
.arcade-pedals .arcade-handbrake.is-held{background:var(--sun);color:var(--ink)}
@media(max-width:620px){
  .arcade-controls{gap:var(--s-2);left:max(var(--s-3),env(safe-area-inset-left));right:max(var(--s-3),env(safe-area-inset-right))}
  .arcade-joystick{width:132px;height:132px}
  .arcade-joystick .arcade-steer-thumb{width:48px;height:48px;transform:translate(calc(-50% + var(--stick-x,0)*35px),calc(-50% + var(--stick-y,0)*35px))}
  .arcade-stick-guide{inset:var(--s-2);line-height:1.6;font-size:var(--t-body)}
  .arcade-secondary-pedals button{width:64px;height:64px;min-height:64px}
  .arcade-pedals .arcade-gas{width:72px;height:136px}
  .arcade-pedals .arcade-brake{height:64px}
}
@media(max-height:500px) and (orientation:landscape){
  .arcade-joystick{width:136px;height:136px}
  .arcade-joystick .arcade-steer-thumb{width:48px;height:48px;transform:translate(calc(-50% + var(--stick-x,0)*37px),calc(-50% + var(--stick-y,0)*37px))}
  .arcade-stick-guide{inset:var(--s-2);line-height:1.6;font-size:var(--t-body)}
  .arcade-secondary-pedals button{width:70px;height:64px;min-height:64px}
  .arcade-pedals .arcade-gas{height:136px;width:80px}
  .arcade-pedals .arcade-brake{height:64px}
}