/* Renforts tactiles pour le pilotage mobile : empêche le navigateur de voler le glissement pendant une partie. */
.game-app,
.game-app * {
  -webkit-tap-highlight-color: transparent;
}

.game-app {
  overscroll-behavior: none;
  touch-action: none;
}

.game-app .arcade-stage,
.game-app .game-canvas {
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.game-app .arcade-stage {
  cursor: grab;
}

.game-app .arcade-stage:active,
.game-app .game-canvas:active {
  cursor: grabbing;
}

/* Anti-blocage : pendant une run, le document ne doit plus défiler ni reprendre le geste. */
@supports selector(body:has(.game-app)) {
  html:has(.game-app),
  body:has(.game-app) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
  }
}

.game-app,
.game-app > .mx-auto {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.game-app .arcade-stage,
.game-app .game-canvas {
  -webkit-user-drag: none;
  pointer-events: auto;
}

.game-app .arcade-stage::before,
.game-app .arcade-stage::after {
  pointer-events: none !important;
}

/* Le mode 3D reste sur les menus, mais le canvas de jeu reste plat pour éviter les micro-freezes au doigt. */
.game-app,
.game-app .arcade-stage,
.game-app .game-canvas {
  perspective: none !important;
  transform-style: flat !important;
}

.game-app .game-canvas {
  contain: layout paint;
}

/* Pilotage réaliste et plus fluide : le canvas devient la zone prioritaire, avec moins de recalculs visuels pendant le drag. */
.game-app .arcade-stage {
  isolation: isolate;
  backface-visibility: hidden;
  box-shadow:
    0 1.4rem 4rem hsl(229 75% 4% / 0.5),
    0 0 0 1px hsl(0 0% 100% / 0.08),
    inset 0 0 2.2rem hsl(var(--primary) / 0.12),
    inset 0 -1.2rem 2.4rem hsl(190 95% 48% / 0.08);
}

.game-app .arcade-stage::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  z-index: 3;
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 50% 12%, hsl(0 0% 100% / 0.18), transparent 16%),
    linear-gradient(110deg, transparent 0 34%, hsl(0 0% 100% / 0.10) 42%, transparent 52% 100%),
    radial-gradient(ellipse at 50% 100%, hsl(var(--accent) / 0.12), transparent 48%);
  mix-blend-mode: screen;
}

.game-app .arcade-stage::after {
  content: "";
  position: absolute;
  inset: 0.5rem;
  z-index: 4;
  border-radius: 1.25rem;
  background:
    linear-gradient(to bottom, hsl(0 0% 100% / 0.035) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at center, transparent 58%, hsl(229 75% 4% / 0.28));
  opacity: 0.42;
}

.game-app .game-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  contain: strict;
  transform: translate3d(0, 0, 0) !important;
  backface-visibility: hidden;
  image-rendering: auto;
  will-change: transform;
}

.game-app .game-canvas:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 3px;
}

/* En tactile, on libère l'écran pour le jeu : moins de panneaux DOM à recomposer = glissement plus réactif. */
@media (pointer: coarse) {
  .game-app > .mx-auto {
    padding-left: max(0.35rem, env(safe-area-inset-left));
    padding-right: max(0.35rem, env(safe-area-inset-right));
  }

  .game-app .grid.flex-1 {
    display: flex !important;
    min-height: 0;
    align-items: center;
    justify-content: center;
  }

  .game-app aside {
    display: none !important;
  }

  .game-app .arcade-stage {
    width: min(calc(100vw - 0.9rem), calc((100dvh - 5.25rem) * 0.6667));
    max-width: min(calc(100vw - 0.9rem), calc((100dvh - 5.25rem) * 0.6667));
    border-radius: 1.45rem;
    padding: 0.25rem;
  }

  .game-app .arcade-stage::before,
  .game-app .arcade-stage::after {
    inset: 0.25rem;
    border-radius: 1.1rem;
  }

  .game-app .game-canvas {
    max-height: calc(100dvh - 5.45rem);
    border-radius: 1.1rem;
  }
}

@media (max-width: 430px) and (pointer: coarse) {
  .game-app > .mx-auto {
    gap: 0.35rem;
    padding-top: max(0.35rem, env(safe-area-inset-top));
    padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
  }

  .game-app > .mx-auto > .flex:first-child {
    min-height: 3.9rem;
    padding: 0.35rem 0.45rem;
  }

  .game-app > .mx-auto > .flex:first-child a[href="#/shop"],
  .game-app > .mx-auto > .flex:first-child span.rounded-full.hidden,
  .game-app > .mx-auto > .flex:first-child span.inline-flex.items-center.gap-1.rounded-full {
    display: none !important;
  }

  .game-app .arcade-stage {
    width: min(calc(100vw - 0.7rem), calc((100dvh - 4.7rem) * 0.6667));
    max-width: min(calc(100vw - 0.7rem), calc((100dvh - 4.7rem) * 0.6667));
  }

  .game-app .game-canvas {
    max-height: calc(100dvh - 4.85rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-app .arcade-stage::before,
  .game-app .arcade-stage::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Anti-blocage magasin : les onglets Fusées / Skins doivent rester touchables et le scroll vertical doit rester fluide. */
.shop-fit-screen {
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.shop-fit-screen * {
  -webkit-tap-highlight-color: transparent;
}

.shop-fit-screen [role="tablist"] {
  position: sticky;
  top: max(0.5rem, env(safe-area-inset-top));
  z-index: 30;
}

.shop-fit-screen button,
.shop-fit-screen article,
.shop-fit-screen img[src^="data:image/svg+xml"] {
  transform-style: flat !important;
  will-change: auto !important;
}

.shop-fit-screen button,
.shop-fit-screen button:hover:not(:disabled),
.shop-fit-screen button:focus-visible:not(:disabled),
.shop-fit-screen img[src^="data:image/svg+xml"] {
  transform: none !important;
}

.shop-fit-screen div::before,
.shop-fit-screen div::after,
.shop-fit-screen header::after {
  pointer-events: none !important;
}

.shop-fit-screen .star-field::after,
.shop-fit-screen div::before,
.shop-fit-screen div::after {
  animation: none !important;
}

.shop-fit-screen img {
  touch-action: pan-y;
}

.shop-fit-screen button,
.shop-fit-screen a,
.shop-fit-screen input,
.shop-fit-screen [role="tab"] {
  touch-action: manipulation;
}

.shop-skins-panel {
  scroll-margin-top: calc(env(safe-area-inset-top) + 5.5rem);
}

.shop-skin-list {
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}

.shop-skin-card {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

@supports (content-visibility: auto) {
  .shop-fit-screen article:not(.shop-skin-card) {
    content-visibility: auto;
    contain-intrinsic-size: 18rem;
  }
}

/* Anti-blocage espace jouer : même logique que l'espace skins avec un shell fixe et un scroll interne fiable. */
.level-fit-screen {
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.level-fit-screen * {
  -webkit-tap-highlight-color: transparent;
}

.level-fit-screen .level-space-shell {
  min-height: 0;
  overflow: hidden;
}

.level-fit-screen [role="tablist"] {
  position: sticky;
  top: max(0.5rem, env(safe-area-inset-top));
  z-index: 30;
}

.level-fit-screen .level-space-content {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.level-fit-screen .level-space-content img {
  touch-action: pan-y;
}

.level-fit-screen button,
.level-fit-screen a,
.level-fit-screen [role="tab"] {
  touch-action: manipulation;
}

.level-fit-screen .level-space-content a[href^="#/game?level="],
.level-fit-screen .level-space-content a[href="#/game?mode=infinite"] {
  scroll-margin-top: calc(env(safe-area-inset-top) + 6rem);
}

@supports (content-visibility: auto) {
  .level-fit-screen .level-space-content > div > div:first-child,
  .level-fit-screen .level-space-content > div > aside {
    content-visibility: auto;
    contain-intrinsic-size: 18rem;
  }
}