/* ============================================================================
   BOARD v2 — pixel-art garment tiles in a chunky arcade cabinet grid
   ============================================================================ */
.board-stage { position: relative; }

.board {
  display: grid;
  /* minmax(0, 1fr) — NOT 1fr — so the columns can shrink below the tile images'
     intrinsic width. WebKit (iOS Safari) won't shrink `1fr` tracks past their
     content, which overflows the board on phones. */
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--board-gap);
  background: rgba(20,21,29,0.06);
  padding: var(--board-gap);
  border-radius: var(--radius-md);
  position: relative;
  min-width: 0;
  max-width: 100%;
  touch-action: none;
  user-select: none;
  box-shadow: inset 0 0 0 2px rgba(20,21,29,0.10);
}

/* ---- Cell — bright tray holding the pixel-art garment ------------------- */
.cell {
  aspect-ratio: 1 / 1;
  min-width: 0;   /* allow the grid cell to shrink below the image's width on WebKit */
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 4px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  cursor: pointer;
  border: 2px solid var(--ink-strong);
  box-shadow: 2px 2px 0 rgba(20,21,29,0.35);
  transition: transform .1s var(--ease-pop), box-shadow .1s, background .12s;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}
.cell .glyph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: transform .2s var(--ease-soft);
  border-radius: calc(var(--radius-sm) - 3px);
  overflow: hidden;
}
.cell .glyph svg { width: 82%; height: 82%; display: block; }
.cell .glyph img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-sm) - 3px);
  display: block; pointer-events: none; user-select: none; -webkit-user-drag: none;
  image-rendering: pixelated;
}

/* Hover lift only on devices with a real hovering pointer (mouse). On touch
   screens :hover sticks after a tap and looks broken, so phones/tablets skip it. */
@media (hover: hover) {
  .cell:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 rgba(20,21,29,0.4);
    z-index: 2;
  }
}

.cell.selected {
  transform: scale(1.06);
  z-index: 5;
  border-color: var(--arc-red);
  box-shadow: 0 0 0 3px var(--arc-yellow), 3px 3px 0 var(--ink-strong);
  animation: sel-blink 0.5s steps(2) infinite;
}
@keyframes sel-blink { 50% { border-color: var(--arc-yellow); box-shadow: 0 0 0 3px var(--arc-red), 3px 3px 0 var(--ink-strong); } }

/* Idle hint — pulse the two cells of a suggested swap */
.cell.hint {
  z-index: 4;
  border-color: var(--arc-blue);
  animation: hint-pulse 0.7s var(--ease-soft) infinite;
}
@keyframes hint-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--arc-blue), 2px 2px 0 var(--ink-strong); transform: translateY(0); }
  50%      { box-shadow: 0 0 0 4px var(--arc-cyan), 2px 2px 0 var(--ink-strong); transform: translateY(-2px); }
}

/* Swap / invalid */
.cell.swap-anim .glyph { animation: swap-bounce .26s var(--ease-pop); }
.cell.invalid-anim { animation: wiggle .34s steps(4); }
@keyframes swap-bounce { 50% { transform: scale(.82); } }
@keyframes wiggle { 0%,100% { transform: translateX(0);} 25% {transform: translateX(-5px);} 75% {transform: translateX(5px);} }

/* ---- Clear / pop — flat arcade flash (no glow) ------------------------- */
.cell.popping { z-index: 6; background: var(--arc-yellow); border-color: var(--ink-strong); }
.cell.popping .glyph { animation: pop-out .36s steps(5) forwards; }
@keyframes pop-out {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(0); opacity: 0; }
}
.cell.popping::before {  /* hard square shockwave ring */
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  border: 3px solid var(--ink-strong);
  animation: clear-ring .4s steps(4) forwards; pointer-events: none;
}
@keyframes clear-ring { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }

/* chunky pixel sparkle */
.cell.sparkle .glyph::after {
  content: "";
  position: absolute; inset: -15%;
  background:
    radial-gradient(circle at 24% 28%, var(--ink-strong) 0 3px, transparent 3px),
    radial-gradient(circle at 76% 24%, var(--arc-red) 0 3px, transparent 3px),
    radial-gradient(circle at 62% 78%, var(--ink-strong) 0 3px, transparent 3px),
    radial-gradient(circle at 30% 74%, var(--arc-blue) 0 3px, transparent 3px);
  image-rendering: pixelated;
  pointer-events: none;
  animation: sparkle-fade .5s steps(3) forwards;
}
@keyframes sparkle-fade { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.3); } }

/* ---- Falling tiles ------------------------------------------------------ */
.cell.falling { will-change: transform; }

/* ---- OUTFIT TILE — arcade power-up (flashing cabinet border + star) ----- */
.cell.outfit {
  background: var(--card);
  border-color: var(--arc-red);
  z-index: 3;
  animation: outfit-flash 0.5s steps(2) infinite;
}
.cell.outfit .glyph { box-shadow: inset 0 0 0 2px var(--arc-yellow); }
.cell.outfit::after {  /* pixel star badge */
  content: "★"; position: absolute; top: -9px; right: -9px;
  width: 22px; height: 22px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--ink-strong);
  background: var(--arc-yellow); border: 2px solid var(--ink-strong);
  box-shadow: 2px 2px 0 var(--ink-strong);
  z-index: 4; font-family: var(--font-display);
  animation: badge-bob 0.8s steps(2) infinite;
}
@keyframes outfit-flash {
  0%,100% { border-color: var(--arc-red);    box-shadow: 0 0 0 2px var(--arc-yellow), 2px 2px 0 var(--ink-strong); }
  50%     { border-color: var(--arc-yellow); box-shadow: 0 0 0 2px var(--arc-red),    2px 2px 0 var(--ink-strong); }
}
@keyframes badge-bob { 50% { transform: translateY(-3px); } }

.cell.exploding { z-index: 7; }
.cell.exploding .glyph { animation: explode .5s steps(5) forwards; }
.cell.exploding::before {
  content: ""; position: absolute; inset: -45%; border-radius: 4px; z-index: 8;
  background: var(--arc-yellow); border: 3px solid var(--ink-strong);
  animation: detonate .5s steps(4) forwards; pointer-events: none;
}
@keyframes explode { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 100% { transform: scale(0); opacity: 0; } }
@keyframes detonate { 0% { opacity: 0.95; transform: scale(0.25) rotate(0); } 100% { opacity: 0; transform: scale(1.5) rotate(45deg); } }