/* v2.4 Runway polish and Character Studio scroll reliability. */
body.mode-runway .arcade-canvas-wrap {
  border-color: rgba(255, 214, 170, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 18px 50px rgba(255,220,180,0.035),
    0 16px 36px rgba(0,0,0,0.72),
    0 0 24px rgba(255,130,190,0.08);
}
body.mode-runway .runway-hud {
  display: block;
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  width: min(92%, 430px);
  margin: 0;
  padding: 7px 12px;
  border: 1px solid rgba(255,224,194,0.32);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(16,8,16,.72), rgba(35,14,25,.68), rgba(10,18,24,.72));
  color: #ffe8d1;
  box-shadow: 0 8px 28px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  text-shadow: 0 0 10px rgba(255,180,160,.28);
}
body.mode-runway .runway-stage-flow span.active{
  border-color:rgba(255,206,99,.82);
  background:linear-gradient(90deg,rgba(255,206,99,.18),rgba(255,130,190,.12));
  box-shadow:0 0 18px rgba(255,206,99,.22),inset 0 0 12px rgba(255,255,255,.06);
  color:#fff8e8;
}
body.mode-runway .runway-active-recipe{
  color:#ffe8c8;
  text-shadow:0 0 12px rgba(255,206,99,.28);
}
body.mode-runway .runway-material-preview{
  letter-spacing:.08em;
}
body.mode-runway .runway-stage-summary strong{
  color:#ffce63;
  text-shadow:0 0 10px rgba(255,206,99,.24);
}
body.mode-runway .fog-overlay {
  opacity: .8;
  background:
    radial-gradient(50% 34% at 18% 16%, rgba(255,130,190,.10), transparent 72%),
    radial-gradient(50% 36% at 82% 18%, rgba(110,220,255,.11), transparent 74%),
    radial-gradient(58% 26% at 50% 78%, rgba(255,225,170,.07), transparent 76%);
}
body.mode-runway .scanline-overlay { opacity: .08; }
body.mode-runway .arcade-frame-overlay {
  background:
    linear-gradient(90deg, rgba(255,160,190,.035), transparent 18%, transparent 82%, rgba(100,210,255,.035)),
    radial-gradient(circle at 50% 0%, rgba(255,240,220,.08), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 22%, transparent 78%, rgba(0,0,0,.22));
}

/* One scroll surface only: prevents nested mobile scroll lock after gameplay. */
.player-hub-scroll {
  touch-action: pan-y;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}
.character-avatar-grid {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
  touch-action: pan-y;
}
.player-hub-panel[data-hub-panel="character"] {
  min-height: min-content;
  padding-bottom: 28px;
}
.player-hub.show .player-hub-card,
.player-hub.show .player-hub-scroll {
  min-height: 0;
}
@media (max-width: 620px) {
  .player-hub-scroll {
    height: 100%;
    padding-bottom: calc(34px + env(safe-area-inset-bottom));
  }
  .character-avatar-card { min-height: 108px; }
}


/* v2.5.1 Deeper back-wall product projection.
   The image now behaves like a distant stage monitor rather than a foreground card. */
.product-flash {
  inset: auto;
  top: 6%;
  left: 50%;
  width: min(58%, 286px);
  height: min(25%, 138px);
  transform:
    translate(calc(-50% + var(--product-wall-x, 0px)), var(--product-wall-y, 0px))
    scale(.72)
    perspective(1000px)
    rotateX(2deg)
    rotateY(var(--product-wall-tilt, 0deg));
  transform-origin: 50% 50%;
  justify-content: center;
  gap: 3px;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(190,235,255,.20);
  border-radius: 8px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, rgba(6,13,20,.65), rgba(1,4,8,.78));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.018),
    0 0 26px rgba(0,183,255,.11),
    0 8px 22px rgba(0,0,0,.30),
    inset 0 0 20px rgba(0,0,0,.48);
  filter: blur(.5px) saturate(.82) brightness(.78) contrast(.94);
  transition:
    opacity .9s ease,
    visibility .9s ease,
    transform 1.8s cubic-bezier(.2,.7,.2,1),
    filter .9s ease;
  animation: productWallDrift 8s ease-in-out infinite alternate;
}
.product-flash::before {
  content: "LIVE COLLECTION";
  position: absolute;
  top: 4px;
  left: 6px;
  z-index: 2;
  color: rgba(220,250,255,.42);
  font-size: .31rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(0,183,255,.16);
}
.product-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 39%, rgba(255,255,255,.045) 47%, transparent 55%),
    radial-gradient(circle at 50% 50%, transparent 34%, rgba(0,0,0,.44) 100%);
  transform: translateX(-55%);
  animation: productWallGlint 6.5s ease-in-out infinite;
}
.product-flash.show {
  opacity: .46;
  visibility: visible;
  pointer-events: none;
  filter: blur(.6px) saturate(.80) brightness(.76) contrast(.92);
}
.product-flash img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 6px;
  opacity: .84;
  filter: contrast(.96) saturate(.84) brightness(.82);
  box-shadow: none;
}
.product-flash-name {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .34rem;
  letter-spacing: .08em;
  color: rgba(235,252,255,.74);
  background: rgba(0,4,8,.54);
  border-color: rgba(150,230,255,.10);
  padding: 2px 5px;
  backdrop-filter: blur(4px);
}
/* Explicit depth stack: background, distant product wall, gameplay, FX, HUD. */
#dodArcadeBgCanvas { z-index: 0; }
.arcade-stage-glow { z-index: 0; }
.product-flash { z-index: 1; }
.arcade-lights-overlay { z-index: 2; }
#dodArcadeGameCanvas { z-index: 3; }
.fog-overlay,
.scanline-overlay { z-index: 4; }
#dodArcadeFxCanvas { z-index: 5; }
.in-game-hud,
.wave-readout,
.combo-decay { z-index: 6; }
.runway-hud { z-index: 8; }
.arcade-frame-overlay { z-index: 9; }
.event-banner,
.score-popups,
.boss-state-indicator { z-index: 10; }
.hit-flash { z-index: 11; }

body.mode-runway .product-flash {
  top: 7.5%;
  width: min(54%, 264px);
  height: min(23%, 128px);
  opacity: 0;
  border-color: rgba(255,220,190,.10);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.015),
    0 0 24px rgba(255,130,190,.09),
    0 8px 22px rgba(0,0,0,.32),
    inset 0 0 20px rgba(0,0,0,.52);
}
body.mode-runway .product-flash.show { opacity: .42; }

/* Atmospheric separation makes the player plane feel nearer than the LED wall. */
body.mode-runway .arcade-lights-overlay {
  background:
    linear-gradient(116deg, transparent 0 22%, rgba(255,255,255,.065) 27%, transparent 32%),
    linear-gradient(244deg, transparent 0 18%, rgba(255,120,190,.075) 23%, transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.18) 48%, transparent 72%);
}

@keyframes productWallDrift {
  0% {
    transform:
      translate(calc(-50% + var(--product-wall-x, 0px)), calc(var(--product-wall-y, 0px) - 1px))
      scale(.70)
      perspective(1000px)
      rotateX(2deg)
      rotateY(var(--product-wall-tilt, 0deg));
  }
  100% {
    transform:
      translate(calc(-50% + var(--product-wall-x, 0px)), calc(var(--product-wall-y, 0px) + 2px))
      scale(.74)
      perspective(1000px)
      rotateX(2deg)
      rotateY(var(--product-wall-tilt, 0deg));
  }
}
@keyframes productWallGlint {
  0%, 42% { transform: translateX(-65%); opacity: 0; }
  55% { opacity: .28; }
  72%, 100% { transform: translateX(70%); opacity: 0; }
}
body.reduced-motion .product-flash,
body.reduced-motion .product-flash::after {
  animation: none !important;
}
@media (max-width: 620px) {
  .product-flash,
  body.mode-runway .product-flash {
    top: 8%;
    width: 58%;
    height: 21%;
    border-radius: 7px;
  }
  .product-flash::before { font-size: .27rem; }
  .product-flash-name { font-size: .29rem; }
}

/* v3.2.1 Product Wall Visibility Fix
   Keeps the display behind gameplay while making the catalog image unmistakable. */
.product-flash,
body.mode-runway .product-flash {
  top: 8% !important;
  left: 50% !important;
  width: min(78%, 390px) !important;
  height: min(32%, 180px) !important;
  opacity: 0 !important;
  transform:
    translate(calc(-50% + var(--product-wall-x, 0px)), var(--product-wall-y, 0px))
    scale(.96)
    perspective(1100px)
    rotateX(1deg)
    rotateY(var(--product-wall-tilt, 0deg)) !important;
  border: 2px solid rgba(180, 245, 255, .52) !important;
  border-radius: 10px !important;
  background: rgba(1, 5, 9, .86) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 28px rgba(0,220,255,.28),
    0 0 48px rgba(0,255,157,.16),
    0 10px 26px rgba(0,0,0,.38),
    inset 0 0 12px rgba(255,255,255,.05) !important;
  filter: blur(.05px) saturate(1.08) brightness(1.03) contrast(1.08) !important;
  z-index: 2 !important;
  transition:
    opacity .45s ease,
    visibility .45s ease,
    transform 1.4s cubic-bezier(.2,.7,.2,1),
    filter .45s ease !important;
}
.product-flash.show,
body.mode-runway .product-flash.show {
  opacity: .92 !important;
  visibility: visible !important;
  filter: blur(.05px) saturate(1.12) brightness(1.06) contrast(1.10) !important;
}
.product-flash img,
body.mode-runway .product-flash img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: none !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, .78) !important;
}
.product-flash::after {
  background:
    linear-gradient(110deg, transparent 0 42%, rgba(255,255,255,.08) 49%, transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 25%, transparent 75%, rgba(0,0,0,.12)) !important;
}
.product-flash::before {
  color: rgba(235, 255, 255, .84) !important;
  font-size: .36rem !important;
  text-shadow: 0 0 8px rgba(0,220,255,.48) !important;
}
.product-flash-name {
  bottom: 5px !important;
  color: rgba(255,255,255,.96) !important;
  background: rgba(0,5,10,.78) !important;
  border-color: rgba(160,240,255,.38) !important;
  font-size: .40rem !important;
  backdrop-filter: none !important;
}
/* Keep stage lighting behind the now-visible LED wall. */
.arcade-lights-overlay { z-index: 1 !important; }
#dodArcadeGameCanvas { z-index: 3 !important; }

@keyframes productWallDrift {
  0% {
    transform:
      translate(calc(-50% + var(--product-wall-x, 0px)), calc(var(--product-wall-y, 0px) - 2px))
      scale(.95)
      perspective(1100px)
      rotateX(1deg)
      rotateY(var(--product-wall-tilt, 0deg));
  }
  100% {
    transform:
      translate(calc(-50% + var(--product-wall-x, 0px)), calc(var(--product-wall-y, 0px) + 2px))
      scale(1)
      perspective(1100px)
      rotateX(1deg)
      rotateY(var(--product-wall-tilt, 0deg));
  }
}

@media (max-width: 620px) {
  .product-flash,
  body.mode-runway .product-flash {
    top: 9% !important;
    width: 82% !important;
    height: 27% !important;
    transform:
      translate(calc(-50% + var(--product-wall-x, 0px)), var(--product-wall-y, 0px))
      scale(.98)
      perspective(900px)
      rotateX(1deg)
      rotateY(var(--product-wall-tilt, 0deg)) !important;
  }
  .product-flash-name { font-size: .36rem !important; }
}