:root{
  --nh-grid-top: 22%;
  --nh-grid-left: 16%;
  --nh-grid-width: 68%;
  --nh-grid-height: 62%;
  --nh-grid-gap: clamp(8px, 1.4vw, 14px);
}

body.neon-heist{
  margin: 0;
  background: #050913;
  overflow-x: hidden;
}

.nh-bg{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: translate3d(0,0,0) scale(1.02);
  filter: saturate(1.15) contrast(1.05) brightness(0.78);
}

.nh-smoke{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.28;
  mix-blend-mode: screen;
  background:
    radial-gradient(1200px 700px at 15% 20%, rgba(110,190,255,0.22), transparent 60%),
    radial-gradient(1000px 600px at 80% 35%, rgba(200,90,255,0.16), transparent 62%),
    radial-gradient(900px 550px at 50% 90%, rgba(40,255,220,0.10), transparent 60%),
    radial-gradient(1200px 900px at 50% 50%, rgba(255,255,255,0.07), transparent 70%);
  animation: nhSmoke 10s linear infinite;
}

@keyframes nhSmoke{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,-1.5%,0) scale(1.01); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}

/* Board stack */
.neon-board .boardContainer{
  position: relative;
}

.neon-container{
  position: relative;
  --nh-board-max: 820px;
  --nh-board-vw: 92vw;
  width: min(var(--nh-board-max), var(--nh-board-vw));
  transform: translateY(var(--nh-board-y, 0px)) scale(var(--board-scale, 1));
  transform-origin: center;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
}

.neon-frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}

/* Mount system grid */
.neon-container #grid,
.neon-container .grid{
  position: absolute;
  top: var(--grid-top, var(--nh-grid-top));
  left: var(--grid-left, var(--nh-grid-left));
  width: var(--grid-width, var(--nh-grid-width));
  height: var(--grid-height, var(--nh-grid-height));
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--grid-row-gap, var(--grid-col-gap, var(--nh-grid-gap)));
  padding: 0;
}

/* Tile */
.nh-tile{
  position: relative;
  border: 0;
  background: rgba(9, 14, 24, 0.55);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 10px 24px rgba(0,0,0,0.35);
}

.nh-tile.is-locked{
  cursor: default;
  opacity: 0.86;
}

/* Win highlight (matching 5-of-a-kind tiles) */
@keyframes nhWinPulse{
  0%{ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 10px 24px rgba(0,0,0,0.35); }
  55%{ box-shadow: inset 0 0 0 2px rgba(255,214,90,0.55), 0 0 28px rgba(255, 214, 90, 0.22), 0 18px 34px rgba(0,0,0,0.42); }
  100%{ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 10px 24px rgba(0,0,0,0.35); }
}

@keyframes nhWinSymbolPop{
  0%{ transform: scale(1); filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45)); }
  35%{ transform: scale(1.20); filter: drop-shadow(0 0 26px rgba(255,214,90,0.40)) drop-shadow(0 10px 18px rgba(0,0,0,0.45)); }
  65%{ transform: scale(1.10); filter: drop-shadow(0 0 18px rgba(255,214,90,0.26)) drop-shadow(0 10px 18px rgba(0,0,0,0.45)); }
  100%{ transform: scale(1.16); filter: drop-shadow(0 0 22px rgba(255,214,90,0.32)) drop-shadow(0 10px 18px rgba(0,0,0,0.45)); }
}

@keyframes nhWinFlash{
  0%{ opacity: 0.0; }
  18%{ opacity: 0.65; }
  35%{ opacity: 0.0; }
  55%{ opacity: 0.55; }
  70%{ opacity: 0.0; }
  100%{ opacity: 0.25; }
}

.nh-tile.is-win{
  animation: nhWinPulse 950ms ease-in-out infinite;
}

.nh-tile.is-win::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120px 90px at 40% 30%, rgba(255, 214, 90, 0.35), transparent 60%),
    radial-gradient(140px 110px at 70% 70%, rgba(90, 210, 255, 0.20), transparent 62%),
    linear-gradient(115deg, transparent, rgba(255,255,255,0.18), transparent);
  mix-blend-mode: screen;
  opacity: 0;
  animation: nhWinFlash 850ms ease-in-out infinite;
}

.nh-tile.is-win .nh-tile__symbol img{
  animation: nhWinSymbolPop 780ms ease-in-out infinite;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce){
  .nh-tile.is-win,
  .nh-tile.is-win::after,
  .nh-tile.is-win .nh-tile__symbol img{ animation: none !important; }
}

/* Result modal symbol preview (inside shared UI modal) */
.nh-resultSymbol{
  display: grid;
  place-items: center;
  margin: 10px 0 8px;
}

.nh-resultSymbol img{
  width: min(90px, 42vw);
  height: auto;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,0.55));
}

.nh-tile::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140px 120px at 30% 20%, rgba(90, 210, 255, 0.15), transparent 60%),
    radial-gradient(120px 120px at 80% 70%, rgba(255, 90, 240, 0.12), transparent 60%);
  opacity: 0.9;
}

.nh-tile__symbol{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
}

.nh-tile__symbol img{
  width: min(72px, 70%);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
  transform: translateZ(0);
}

.nh-tile__scratch,
.nh-tile__fx{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.nh-tile__fx{ z-index: 4; pointer-events: none; }

.nh-tile.is-revealed .nh-tile__scratch{ display:none; }

/* High/rare reveal */
.nh-tile.is-high .nh-tile__symbol img{ animation: nhPop 480ms ease-out; }
.nh-tile.is-rare .nh-tile__symbol img{ animation: nhRare 900ms ease-out; }

@keyframes nhPop{
  0%{ transform: scale(0.86); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  100%{ transform: scale(1); }
}

@keyframes nhRare{
  0%{ transform: scale(0.82) rotate(-2deg); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  55%{ transform: scale(1.08) rotate(1deg); filter: drop-shadow(0 0 18px rgba(255,220,90,0.45)); }
  100%{ transform: scale(1) rotate(0deg); }
}

/* Bonus overlay */
.nh-bonus{
  position: fixed;
  inset: 0;
  /* Keep above game/UI, but below shared result modal (z-index: 80) */
  z-index: 75;
  display: grid;
  place-items: center;
  pointer-events: auto;
}

.nh-bonus__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.72);
}

.nh-bonus__panel{
  position: relative;
  width: min(780px, 92vw);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  pointer-events: auto;
}

.nh-bonus__art{
  display:block;
  width: 100%;
  height: auto;
}

.nh-bonus__content{
  position: absolute;
  inset: 0;
  padding: 18px;
  display: grid;
  align-content: end;
  gap: 10px;
}

.nh-bonus__center{
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(420px, 86%);
  text-align: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,0.46);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}

.nh-bonus__center-kicker{
  font: 800 12px/1 system-ui, Segoe UI, Arial;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin-bottom: 6px;
}

.nh-bonus__center-amount{
  font: 900 22px/1.05 system-ui, Segoe UI, Arial;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 8px 18px rgba(0,0,0,0.55);
}

.nh-bonus__actions{
  display: flex;
  justify-content: flex-end;
}

.nh-bonus__continue{
  appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255, 214, 90, 0.16);
  color: rgba(255,255,255,0.95);
  font: 800 14px/1 system-ui, Segoe UI, Arial;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 214, 90, 0.36);
}

.nh-bonus__top{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.nh-bonus__title{
  margin: 0;
  font: 700 18px/1.1 system-ui, Segoe UI, Arial;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}

.nh-bonus__close{
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.95);
  cursor: pointer;
}

.nh-bonus__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.nh-bonus__pick{
  appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 14px 10px;
  background: rgba(5, 10, 18, 0.72);
  color: rgba(255,255,255,0.95);
  font: 700 16px/1.1 system-ui, Segoe UI, Arial;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}

.nh-bonus__pick:disabled{
  cursor: default;
  opacity: 0.92;
}

.nh-bonus__pick.is-revealed{
  background: rgba(255, 204, 64, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 90, 0.42), 0 0 28px rgba(255, 214, 90, 0.18);
}

.nh-bonus__result{
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.40);
  color: rgba(255,255,255,0.92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

/* Responsive tuning */
@media (max-width: 860px){
  :root{
    --nh-grid-top: 23%;
    --nh-grid-left: 13%;
    --nh-grid-width: 74%;
    --nh-grid-height: 60%;
  }
}

@media (max-width: 768px){
  /* When the board is scaled up (via Grid Editor export), keep the fixed header/bottom UI stable
     by top-aligning the stage and reserving vertical space. */
  body[data-game="bandicoot-neon-heist"]{ --board-scale: 1.4; }

  body[data-game="bandicoot-neon-heist"] .ui-stage{
    align-items: flex-start;
    padding-top: 96px;
    padding-bottom: 240px;
  }

  /* Make scaling grow downward so it doesn't push into the header. */
  body[data-game="bandicoot-neon-heist"] .neon-container{
    --nh-board-vw: 68vw;
    --nh-board-y: 142px;
    transform-origin: top center;
  }
}

@media (max-width: 520px){
  :root{
    --nh-grid-top: 24%;
    --nh-grid-left: 9%;
    --nh-grid-width: 82%;
    --nh-grid-height: 60%;
  }

  .nh-tile{ border-radius: 12px; }
}

@media (max-height: 520px) and (orientation: landscape){
  .neon-container{ --nh-board-max: 860px; --nh-board-vw: 88vw; }
  :root{
    --nh-grid-top: 22%;
    --nh-grid-left: 18%;
    --nh-grid-width: 64%;
    --nh-grid-height: 62%;
  }
}
/* Grid Editor export (desktop) for /games/bandicoot-neon-heist/index.html (1912x914, landscape) */
body[data-game="bandicoot-neon-heist"] #grid.grid.grid--5x4 {
  --grid-top: 34.25%;
  --grid-left: 29%;
  --grid-width: 42%;
  --grid-height: 42.75%;
  --grid-row-gap: 3px;
  --grid-col-gap: 0px;
  --tile-bg-scale: 34%;
  --tile-pad: 0px;
}

/* Grid Editor export (desktop) for /games/bandicoot-neon-heist/index.html (1698x776, landscape) */
body[data-game="bandicoot-neon-heist"] .neon-container {
  --board-scale: 1;
}

body[data-game="bandicoot-neon-heist"] #grid.grid.grid--5x4 {
  --grid-top: 33.75%;
  --grid-left: 28.25%;
  --grid-width: 44.25%;
  --grid-height: 43.5%;
  --grid-row-gap: 6px;
  --grid-col-gap: 0px;
  --tile-bg-scale: 25%;
  --tile-pad: 0px;
}

/* Grid Editor export (mobile) for /games/bandicoot-neon-heist/index.html (439x974, portrait) */
@media (max-width: 768px) {
  body[data-game="bandicoot-neon-heist"] .neon-container {
    --board-scale: 1.4;
  }
  
  body[data-game="bandicoot-neon-heist"] #grid.grid.grid--5x4 {
    --grid-top: 33.75%;
    --grid-left: 28.25%;
    --grid-width: 44.25%;
    --grid-height: 44.5%;
    --grid-row-gap: 3px;
    --grid-col-gap: 0px;
    --tile-bg-scale: 121%;
    --tile-pad: 41px;
  }
}