/* ---------- Game screen ---------- */
#screen-game { background: var(--bg); background-image: var(--felt); }

.game-bar { min-height: 50px; }
.game-counter { font-size: .95rem; font-weight: 600; color: var(--ink-dim); }
.icon-btn.active { background: var(--accent); color: #33240a; }

#board-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
  padding-bottom: var(--safe-bottom);
}

#board {
  position: absolute;
  inset: 0;
  touch-action: none;
}

#preview-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 82%;
  max-height: 82%;
  border-radius: 12px;
  opacity: .92;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
  pointer-events: none;
  z-index: 200;
}
#preview-overlay[hidden] { display: none; }

/* ---------- Groups & pieces ---------- */
.group {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
.group.lifted .piece { filter: brightness(1.06); }
.group.lifted::after { content: ""; }
.group.settling { transition: transform .09s ease-out; }
.group.entering { transition: transform .45s cubic-bezier(.2, .8, .3, 1); }

.piece {
  position: absolute;
  perspective: 600px;
}
.flipper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .35s ease;
}
.piece.facedown .flipper { transform: rotateY(180deg); }

.face {
  position: absolute;
  inset: 1px;
  border-radius: 10%/8%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .85),
    0 2px 6px rgba(0, 0, 0, .45);
  background-color: var(--card-face);
  overflow: hidden;
}
.face.back {
  transform: rotateY(180deg);
  background-color: #b23a48;
  background-size: cover;
  background-position: center;
}

/* merged pieces: soften inner border so the picture reads as one */
.piece.merged .face.front {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .35),
    0 2px 6px rgba(0, 0, 0, .35);
}

/* board solved: remove all seams */
#board.solved .piece .face.front {
  box-shadow: none;
  border-radius: 0;
  inset: 0;
  transition: all .5s ease;
}

/* snap pulse */
@keyframes pulse {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.55); }
  100% { filter: brightness(1); }
}
.piece.pulse .face.front { animation: pulse .32s ease; }

@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(1.6deg); }
  75% { transform: rotate(-1.6deg); }
}
.piece.wobble { animation: wobble .25s ease; }

/* ---------- Win overlay ---------- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  background: rgba(5, 18, 14, .78);
  animation: fadein .4s ease;
}
.overlay[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

#confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.win-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  max-width: min(400px, 92vw);
  animation: winpop .5s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes winpop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.win-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
#win-image {
  max-height: 48vh;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
}
.win-buttons { display: flex; gap: 12px; }