/* ==========================================================================
   App shell: simple viewport, allow scroll so header/content are never trapped
   ========================================================================== */
html {
  min-height: 100vh;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}
body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#headlessui-portal-root {
    position: relative;
    z-index: 100;
}

/* Mobile: extra bottom padding so content isn’t covered by the URL bar when scrolled to the end */
@media (max-width: 1024px) {
  .scroll-content-safe-bottom {
    padding-bottom: max(48px, env(safe-area-inset-bottom, 0px));
  }
}

/* Auth pages (login/register): fixed viewport height for app-like feel on mobile */
.auth-viewport {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Play view: fill visible viewport so games (e.g. Snake) don't extend off bottom on mobile */
.play-viewport-fill {
  min-height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  box-sizing: border-box;
}

.play-viewport-fill .play-game-inner {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

/* Game canvas: slight shadow + edge on desktop so play area is visible (all games) */
@media (min-width: 640px) {
  .game-canvas-edge {
    box-shadow: 0 4px 14px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06);
  }
}

/* Theme-aware button hover/active (game start/end cards, leaderboard, CTA) */
.theme-btn {
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.theme-btn[data-frame="pixel"]:hover:not(:disabled) {
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
  transform: scale(1.02);
}
.theme-btn[data-frame="pixel"]:active:not(:disabled) {
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
  transform: scale(0.98);
}
.theme-btn[data-frame="neon"]:hover:not(:disabled) {
  box-shadow: 0 0 12px color-mix(in srgb, var(--btn-primary, #7c3aed) 40%, transparent),
              0 0 24px color-mix(in srgb, var(--btn-primary, #7c3aed) 22%, transparent);
  transform: scale(1.02);
}
.theme-btn[data-frame="neon"]:active:not(:disabled) {
  box-shadow: 0 0 6px color-mix(in srgb, var(--btn-primary, #7c3aed) 35%, transparent),
              0 0 12px color-mix(in srgb, var(--btn-primary, #7c3aed) 18%, transparent);
  transform: scale(0.98);
}
.theme-btn[data-frame="glass"]:hover:not(:disabled) {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: scale(1.02);
}
.theme-btn[data-frame="glass"]:active:not(:disabled) {
  transform: scale(0.98);
}
.theme-btn[data-frame="clean"]:hover:not(:disabled),
.theme-btn[data-frame="rounded"]:hover:not(:disabled),
.theme-btn[data-frame="shadow"]:hover:not(:disabled),
.theme-btn[data-frame="bordered"]:hover:not(:disabled) {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 10px -4px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
}
.theme-btn[data-frame="clean"]:active:not(:disabled),
.theme-btn[data-frame="rounded"]:active:not(:disabled),
.theme-btn[data-frame="shadow"]:active:not(:disabled),
.theme-btn[data-frame="bordered"]:active:not(:disabled) {
  transform: scale(0.98);
}
.theme-btn[data-frame]:hover:not(:disabled) {
  transform: scale(1.02);
}
.theme-btn[data-frame]:active:not(:disabled) {
  transform: scale(0.98);
}