/* ============================================================
   MultiGame Arcade — Fullscreen & Game Mode Styles
   ============================================================ */

/* Lock body in game mode to eliminate browser elastic bounce & accidental scrolling */
body.arcade-game-mode {
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* Fullscreen Toggle Button */
.btn-arcade-fullscreen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #e2e8f0;
  box-shadow: 0 3px 0 #cbd5e1;
  color: #334155;
  cursor: pointer;
  font-size: 1.15rem;
  transition: all 0.15s ease;
  user-select: none;
  vertical-align: middle;
}

.btn-arcade-fullscreen:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #94a3b8;
}

.btn-arcade-fullscreen:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #cbd5e1;
}

/* Dark theme variation for games like Pong, Snake, Sudoku Dark */
[data-theme="dark"] .btn-arcade-fullscreen,
[data-theme="neon"] .btn-arcade-fullscreen,
body.dark-mode .btn-arcade-fullscreen {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
  color: #f1f5f9;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] .btn-arcade-fullscreen:hover,
[data-theme="neon"] .btn-arcade-fullscreen:hover,
body.dark-mode .btn-arcade-fullscreen:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .btn-arcade-fullscreen:active,
[data-theme="neon"] .btn-arcade-fullscreen:active,
body.dark-mode .btn-arcade-fullscreen:active {
  transform: translateY(2px);
  box-shadow: none;
}

/* In Fullscreen mode, ensure root container spans viewport seamlessly */
:fullscreen body,
:-webkit-full-screen body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}