/* "Fit to screen" button shown briefly on touch devices after a rotation (see assets/js/arcade-rotate.js) */
.rg-fit{font:600 .78rem/1 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#0b0c0f;background:#ffd166;border:0;border-radius:999px;min-height:32px;padding:0 .8rem;margin-left:auto;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.rg-fit:focus-visible{outline:3px solid #fff;outline-offset:2px}
.rg-fit[hidden]{display:none}
.rg-fit.in-bar{flex:0 0 auto}
.rg-fit.in-bar+.gb-menu{margin-left:0}
.site-header .rg-fit.in-bar{margin-inline:auto .6rem}
body > .rg-fit{position:fixed;z-index:1001;right:max(.6rem,env(safe-area-inset-right));bottom:max(.6rem,env(safe-area-inset-bottom));margin:0;box-shadow:0 4px 14px rgba(0,0,0,.5)}

/* Touch devices: menus / game-over cards are scrollable and never get cut off (e.g. a tall card in landscape) */
@media (pointer:coarse){
  .overlay,.modal{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;align-items:flex-start;place-items:start center}
  .overlay>.panel,.modal>.modal-card{margin-block:auto;max-width:100%}
}
/* ...and in short landscape screens the cards are tighter so Play / Start stays on screen */
@media (pointer:coarse) and (max-height:520px){
  .overlay,.modal{padding-block:.4rem}
  .overlay>.panel,.modal>.modal-card{padding-block:.7rem .75rem}
  .overlay>.panel h1,.overlay>.panel h2,.modal-card h2{margin-bottom:.2rem}
  .overlay .feature-list,.overlay .hint-keys,.overlay .hint,.overlay .controls-hint{display:none}
  .overlay .actions{margin-top:.6rem}
  .overlay .nav-home{margin-top:.4rem}
  .overlay .subtitle,.overlay .lead,.overlay .instructions{margin-block:.25rem .5rem}
}