:root {
  --brand-dark: #0F172A;
  --brand-orange: #FF6B00;
  --brand-yellow: #FFD60A;
  --mobile-ratio: 853 / 1844;
  --desktop-ratio: 1536 / 1024;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--brand-dark);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 35%, rgba(255, 107, 0, .20), transparent 34%),
    radial-gradient(circle at 20% 78%, rgba(255, 214, 10, .10), transparent 30%),
    linear-gradient(135deg, #050816 0%, #0F172A 45%, #111827 100%);
}

.ambient {
  position: absolute;
  inset: -20%;
  z-index: -3;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 107, 0, .22), transparent 16%),
    radial-gradient(circle at 70% 65%, rgba(255, 214, 10, .12), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(255, 107, 0, .18), transparent 12%);
  filter: blur(28px);
  opacity: .72;
  animation: ambientMove 12s ease-in-out infinite alternate;
}

.blur-bg {
  position: absolute;
  inset: -24px;
  z-index: -2;
  overflow: hidden;
  opacity: .46;
  transform: scale(1.08);
  filter: blur(22px) saturate(1.1) brightness(.55);
}
.blur-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 8, 22, .20), rgba(5, 8, 22, .44)),
    radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.48) 100%);
  pointer-events: none;
}

.poster {
  position: relative;
  width: min(100vw, calc(100dvh * 853 / 1844));
  aspect-ratio: var(--mobile-ratio);
  max-width: 100vw;
  max-height: 100dvh;
  border-radius: clamp(0px, 1.5vw, 18px);
  overflow: hidden;
  box-shadow: 0 0 42px rgba(255, 107, 0, .22), 0 24px 70px rgba(0,0,0,.44);
  animation: posterIn .7s ease-out both, floatSoft 7s ease-in-out 1s infinite;
}
.poster picture, .poster img {
  display: block;
  width: 100%;
  height: 100%;
}
.poster img {
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.store-link {
  position: absolute;
  z-index: 10;
  display: block;
  border-radius: 18px;
  cursor: pointer;
  outline: none;
}
.store-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 0 0 7px rgba(255,107,0,.75);
}

/* Coordinate overlay MOBILE: riferite al poster verticale 853x1844 */
.play-link {
  left: 5.5%;
  top: 82.0%;
  width: 42.5%;
  height: 7.2%;
}
.app-link {
  left: 51.0%;
  top: 82.0%;
  width: 43.5%;
  height: 7.2%;
}

@media (min-width: 768px) {
  .poster {
    width: min(100vw, calc(100dvh * 1536 / 1024));
    aspect-ratio: var(--desktop-ratio);
    border-radius: clamp(0px, .8vw, 16px);
  }
  /* Coordinate overlay DESKTOP: riferite al poster landscape 1536x1024 */
  .play-link {
    left: 3.7%;
    top: 79.5%;
    width: 19.8%;
    height: 10.5%;
  }
  .app-link {
    left: 25.4%;
    top: 79.5%;
    width: 19.8%;
    height: 10.5%;
  }
}

@media (max-width: 420px) {
  .poster { border-radius: 0; box-shadow: 0 0 26px rgba(255, 107, 0, .16); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@keyframes posterIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes ambientMove {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}