* { box-sizing: border-box; }
body { margin: 0; min-width: 0; color: #222; font: 16px/1.45 system-ui, sans-serif; }
main { display: grid; justify-items: center; padding: 1rem 0 2rem; }
#game-shell { width: min(640px, 100vw); }
#player-surface { width: min(640px, 100%); aspect-ratio: 4 / 3; touch-action: none; overscroll-behavior: contain; }
#player-surface > ruffle-player { display: block; width: 100%; height: 100%; touch-action: none; }
.mobile-controls { display: none; }
.notice { width: min(640px, calc(100vw - 2rem)); margin-top: 1rem; }
.notice p { margin: 0 0 .5rem; }

@media (pointer: coarse) {
  main { padding: 0 0 2rem; }
  #game-shell {
    width: 100%;
    padding: calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) 1rem calc(1rem + env(safe-area-inset-left));
    overscroll-behavior: contain;
  }
  #player-surface {
    width: min(640px, calc(100vw - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right)));
    margin-inline: auto;
  }
  .mobile-controls { display: grid; justify-items: center; gap: .5rem; margin-top: .75rem; }
  #fullscreen-toggle { min-width: 44px; min-height: 44px; padding: .5rem 1rem; font: inherit; }
  .rotate-hint { margin: 0; }
  #fullscreen-status { min-height: 1.45em; margin: 0; text-align: center; }

  @supports (height: 100svh) {
    #game-shell { min-height: 100svh; }
    #player-surface {
      width: min(640px, calc(100vw - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right)), max(1px, calc(133.333svh - 8rem - env(safe-area-inset-top) - env(safe-area-inset-bottom))));
    }
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  .mobile-controls {
    width: min(640px, 100%);
    margin-inline: auto;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
  }
  .rotate-hint { display: none; }
  #fullscreen-status { max-width: 32ch; text-align: left; }
}

#game-shell:fullscreen {
  width: 100vw;
  height: 100vh;
  padding: calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
  background: #000;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
}
#game-shell:fullscreen #player-surface {
  width: min(640px, calc(100vw - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right)), max(1px, calc(133.333vh - 8rem - env(safe-area-inset-top) - env(safe-area-inset-bottom))));
}
#game-shell:fullscreen .mobile-controls { color: #fff; }

@media (pointer: fine) {
  .mobile-controls { display: none; }
}