/* grid.css - board sizing, grid overlay positioning, responsive variables */
/* NOTE: The DEV Grid Editor saves values to localStorage and auto-applies them ONLY on localhost.
  To make your tuned grid match on GitHub Pages, use ?gridEditor=1, then Copy/Copy Both and paste
  the exported CSS into this file (commit + push). */

:root{
  /* Desktop defaults (tweak with DEV grid editor if you want) */
  --ir-grid-top: 24%;
  --ir-grid-left: 12%;
  --ir-grid-width: 76%;
  --ir-grid-height: 62%;

  --ir-gap: clamp(4px, 0.9vw, 10px);
  --ir-tile-pad: clamp(8px, 1.2vw, 14px);
}

/* Mounted board wrapper already exists from shared UI */
body[data-game="icebound-riches"] .boardWrap{
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 80px auto 0;
  min-height: 62vh;
  display: grid;
  place-items: center;
  pointer-events: none;
}

@media (max-width: 768px){
  body[data-game="icebound-riches"] .boardWrap{
    margin-top: 14px;
    max-width: 98vw;
    min-height: 52vh;
  }
}

body[data-game="icebound-riches"] .boardContainer{
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
}

.ir-container{
  position: relative;
  width: min(560px, 92vw);
  margin: 0 auto;
}

.ir-container__art{
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* Renderer mode: container art must fill the renderer-owned box */
body.aps-use-renderer[data-game="icebound-riches"] .scratch-container__art.ir-container__art{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Grid overlays inside container art */
#grid.grid--icebound{
  position: absolute;
  top: var(--grid-top, var(--ir-grid-top));
  left: var(--grid-left, var(--ir-grid-left));
  width: var(--grid-width, var(--ir-grid-width));
  height: var(--grid-height, var(--ir-grid-height));

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);

  row-gap: var(--grid-row-gap, var(--ir-gap));
  column-gap: var(--grid-col-gap, var(--ir-gap));

  pointer-events: auto;
}

@keyframes irTileFallAway{
  0%{ transform: translate3d(0,0,0) rotate(0deg); opacity: 1; filter: none; }
  100%{ transform: translate3d(0, 80px, 0) rotate(var(--fall-rot, 0deg)); opacity: 0; filter: blur(1px); }
}

@keyframes irTileDealIn{
  0%{ transform: translate3d(0, 18px, 0) scale(0.98); opacity: 0; }
  100%{ transform: translate3d(0,0,0) scale(1); opacity: 1; }
}

#grid.grid--icebound.ir-grid--falling .ir-tile{
  animation: irTileFallAway 420ms ease-in forwards;
  animation-delay: var(--fall-delay, 0ms);
}

#grid.grid--icebound.ir-grid--deal .ir-tile{
  animation: irTileDealIn 320ms ease-out both;
  animation-delay: var(--deal-delay, 0ms);
}

/* Tiles */
#grid.grid--icebound .ir-tile{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  padding: var(--tile-pad, var(--ir-tile-pad));

  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  overflow: hidden;

  /* Stage 0: frozen starter tile */
  background-image:
    url("../assets/tiles/main-tile.svg"),
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35), rgba(120,200,255,0.12) 45%, rgba(0,0,0,0.12) 100%);
  background-size: cover;
  background-position: center;

  cursor: pointer;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);

  transition: transform 120ms ease, box-shadow 140ms ease, filter 140ms ease;
}

/* Stage 1/2: semi-cracked (after first click, before reveal) */
#grid.grid--icebound .ir-tile.ir-tile--stage-1,
#grid.grid--icebound .ir-tile.ir-tile--stage-2{
  background-image:
    url("../assets/tiles/semi-cracked-tile.svg"),
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.24), rgba(120,200,255,0.10) 45%, rgba(0,0,0,0.14) 100%);
}

#grid.grid--icebound .ir-tile:hover{
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 14px 26px rgba(0,0,0,0.35);
}

#grid.grid--icebound .ir-tile:disabled{
  cursor: default;
  opacity: 0.78;
  transform: none;
  box-shadow: none;
}

#grid.grid--icebound .ir-tile--revealed{
  /* Stage 3: cracked tile + reward visible */
  background-image:
    url("../assets/tiles/cracked-tile.svg"),
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.14), rgba(120,200,255,0.06) 45%, rgba(0,0,0,0.18) 100%);
  border-color: rgba(255,255,255,0.18);
}

/* Frozen: permanently locked tile (no prize) */
#grid.grid--icebound .ir-tile--revealed[data-kind="frozen"]{
  background-image:
    url("../assets/tiles/frozen-tile.svg"),
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), rgba(120,200,255,0.08) 45%, rgba(0,0,0,0.18) 100%);
}

#grid.grid--icebound .ir-tile__label{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px;
  font-weight: 950;
  letter-spacing: 0.2px;
  font-size: clamp(12px, 1.4vw, 16px);
  gap: 6px;
}

#grid.grid--icebound .ir-tile__icon{
  width: clamp(30px, 5vw, 46px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
}

#grid.grid--icebound .ir-tile__value{
  font-weight: 950;
  font-size: clamp(12px, 1.6vw, 18px);
}

#grid.grid--icebound .ir-tile__sub{
  display: block;
  font-weight: 800;
  opacity: 0.88;
  font-size: clamp(11px, 1.2vw, 14px);
}


@media (min-width: 769px) and (max-width: 1024px){
  :root{
    --ir-grid-top: 23%;
    --ir-grid-left: 11%;
    --ir-grid-width: 78%;
    --ir-grid-height: 64%;
  }
}

/* Bonus open: prevent underlying interaction */
body[data-game="icebound-riches"].ir-bonus-open #grid.grid--icebound{
  pointer-events: none;
}

/* Grid Editor export (mobile) for /games/bandicoot-icebound-riches/index.html (412x915, portrait) */
@media (max-width: 768px) {
  body[data-game="icebound-riches"] #grid.grid.grid--4x4.grid--icebound {
    --grid-top: 33.5%;
    --grid-left: 22.25%;
    --grid-width: 54.75%;
    --grid-height: 42.5%;
    --grid-row-gap: 4px;
    --grid-col-gap: 0px;
    --tile-bg-scale: 97%;
    --tile-pad: 0px;
  }
}