/* Holy Puzzle: tile page (templates/holypuzzle/tile.html); preview overlay etc. in puzzle.css */

#tileWrap {
  position: relative;
  display: flex;
  justify-content: center;
}

/* phones: let the board reach almost to the screen edges */
@media (max-width: 575.98px) {
  #tileWrap {
    width: calc(100% + 1rem);
    margin: 0 -.5rem;
  }
}

#tileBoard {
  --cols: 3;
  --rows: 3;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--bs-border-radius-lg);
  background: #2b2f36;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;             /* touch drags are handled by tile.ts */
  container-type: inline-size;    /* lets badges size themselves to the tiles (cqw units) */
  transition: box-shadow .4s ease;
}

.tile {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% / var(--cols));
  height: calc(100% / var(--rows));
  padding: 0;
  border: 0;
  background-image: var(--img);
  background-size: calc(var(--cols) * 100%) calc(var(--rows) * 100%);
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 0 0 2px rgba(0, 0, 0, .15);
  border-radius: 4px;
  transition: transform .15s ease, box-shadow .3s ease, border-radius .3s ease, opacity .3s ease;
  cursor: grab;
}
.tile:hover { filter: brightness(1.08); }
.tile:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: -3px; z-index: 1; }

/* tile being dragged: follows the pointer, no transition lag */
.tile.dragging {
  z-index: 10;
  transition: box-shadow .2s ease;
  cursor: grabbing;
  box-shadow: inset 0 0 0 2px #fff, 0 12px 24px rgba(0, 0, 0, .4);
}
/* tile it will swap with */
.tile.target {
  box-shadow: inset 0 0 0 4px var(--bs-primary);
  filter: brightness(.8);
}
/* tile picked by a tap, waiting for a second tap */
.tile.selected {
  z-index: 2;
  box-shadow: inset 0 0 0 4px var(--bs-warning);
}

.tile .num {
  position: absolute;
  top: 4px;
  left: 4px;
  min-width: 1.5em;
  padding: 0 .35em;
  border-radius: 999px;
  font-size: min(.75rem, 100cqw / var(--cols) * .18);   /* shrink on small tiles */
  font-weight: 600;
  line-height: 1.5em;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  display: none;
}
#tileBoard.show-numbers .tile .num { display: block; }

/* green tick, top-right, on tiles that are in the right place */
.tile .ok {
  position: absolute;
  top: 4px;
  right: 4px;
  width: min(1.4rem, 100cqw / var(--cols) * .3);       /* shrink on small tiles */
  height: min(1.4rem, 100cqw / var(--cols) * .3);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: min(.9rem, 100cqw / var(--cols) * .2);
  color: #fff;
  background: var(--bs-success);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 2px 4px rgba(0, 0, 0, .3);
}
.tile.correct .ok {
  display: flex;
  animation: pop .25s ease;
}
@keyframes pop {
  from { transform: scale(0); }
  60%  { transform: scale(1.2); }
  to   { transform: scale(1); }
}

/* solved: tiles merge into one seamless picture */
#tileBoard.solved { box-shadow: 0 0 0 6px var(--bs-success), 0 12px 40px rgba(0, 0, 0, .25); }
#tileBoard.solved .tile { box-shadow: none; border-radius: 0; cursor: default; filter: none; }
#tileBoard.solved .tile .num,
#tileBoard.solved .tile .ok { display: none; }

/* the overlay covers the board's rounded box, above the tiles */
#previewOverlay {
  z-index: 20;
  border-radius: var(--bs-border-radius-lg);
}
.preview-frame img {
  border-radius: var(--bs-border-radius-lg);
}