/* Fullscreen game stage for touch devices (Sonic player + Ice Shuffle).
 *
 * A touch inside #gameswf fullscreenes #gamecontainer (see
 * touch-fullscreen.js). The container becomes a black flex stage and the
 * SWF keeps its 640x448 aspect via shrink-to-fit, so any aspect mismatch
 * shows as black bars (letterbox). Overrides (with !important) beat the
 * inline 448px height and the Ice Shuffle 600px crop window.
 */

/* NOTE: webkit-prefixed selectors live in their own rules throughout
   this file — one invalid selector in a comma group drops the WHOLE
   rule, and non-webkit engines (Firefox) reject :-webkit-full-screen. */

#gamecontainer:fullscreen {
  position: relative;
  width: 100% !important;
  max-width: 100vw;
  height: 100vh !important;
  max-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#gamecontainer:-webkit-full-screen {
  position: relative;
  width: 100% !important;
  max-width: 100vw;
  height: 100vh !important;
  max-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fallback stages were removed: only native fullscreen applies. If the
   grant fails, nothing applies (the next touch retries). */

/* Letterboxed stage: the SWF renders noscale (fixed 640x448), so the
   box is kept at natural size and scaled directly with a CSS transform
   (factor set inline by touch-fullscreen.js: min(vw/640, vh/448)).
   transform-origin center keeps the flex centering exact, and scaling the
   composited frame works regardless of the player's internal scaleMode. */
#gamecontainer:fullscreen #gameswf {
  width: 640px !important;
  height: 448px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  transform-origin: center center;
}

#gamecontainer:-webkit-full-screen #gameswf {
  width: 640px !important;
  height: 448px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  transform-origin: center center;
}

#gamecontainer:fullscreen #gameswf ruffle-player,
#gamecontainer:fullscreen #gameswf object,
#gamecontainer:fullscreen #gameswf embed {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

#gamecontainer:-webkit-full-screen #gameswf ruffle-player,
#gamecontainer:-webkit-full-screen #gameswf object,
#gamecontainer:-webkit-full-screen #gameswf embed {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* While the stage owns the screen, hide floating page chrome (language
   flags, feedback tab) so it can never paint over the stage. Plain
   selectors only — no prefixed grouping hazard here. */
html.tc-stage-active .flags-float,
html.tc-stage-active #feedback {
  display: none !important;
}

/* While fullscreen, nothing on the page may be text-selectable
   (long-presses are game input, not selection gestures), and iOS must
   not raise its long-press callout. */
html.tc-stage-active body,
html.tc-stage-active body * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Cropped stages (Ice Shuffle, flagged .tc-cropped by JS): the 600px
   crop window moves onto #gameswf itself (the fullscreen container no
   longer clips), and the player keeps its -20px side offsets so the
   hidden edges stay hidden. Higher specificity than the base rules above,
   so these win on cropped pages only. */
#gamecontainer:fullscreen.tc-cropped #gameswf {
  width: 600px !important;
  height: 444px !important;
  overflow: hidden !important;
}

#gamecontainer:-webkit-full-screen.tc-cropped #gameswf {
  width: 600px !important;
  height: 444px !important;
  overflow: hidden !important;
}

#gamecontainer:fullscreen.tc-cropped #gameswf ruffle-player,
#gamecontainer:fullscreen.tc-cropped #gameswf object,
#gamecontainer:fullscreen.tc-cropped #gameswf embed {
  width: 640px !important;
  height: 448px !important;
  margin: -2px -20px !important;
}

#gamecontainer:-webkit-full-screen.tc-cropped #gameswf ruffle-player,
#gamecontainer:-webkit-full-screen.tc-cropped #gameswf object,
#gamecontainer:-webkit-full-screen.tc-cropped #gameswf embed {
  width: 640px !important;
  height: 448px !important;
  margin: -2px -20px !important;
}

/* Exit control (created by touch-fullscreen.js, toggled per mode).
   Uses the stock exit-full-btn art (64x64). */
.tc-exit-fullscreen {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 60;
  width: 40px;
  height: 40px;
  border: none;
  padding: 0;
  background: transparent url("/images/exit-full-btn.png") no-repeat center center;
  background-size: contain;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}