:root{
  --shatter-rows: 6;
  --shatter-cols: 10;
  --shatter-gap: 2px;
  --shatter-radius: 16px;
  --shatter-bg: #0b1022;
  --shard-color: rgba(255,255,255,0.06);
  --zoomed-scale: 1.6;
}

.shatter{
  position: relative;
  width: 100%;
  min-height: 420px;
  aspect-ratio: 4/4;
  border-radius: var(--shatter-radius);
  overflow: hidden;
  background: var(--shatter-bg);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  cursor: pointer;
  isolation: isolate;
}

.shatter .hint{
  position: absolute; inset: auto 14px 12px auto;
  font-size: 12px;
  color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.35);
  padding: 6px 8px; border-radius: 8px;
  backdrop-filter: blur(4px);
  z-index: 4;
}

.shatter .cover-under{ position: absolute; inset: 0; z-index: 1; }
.shatter .cover-under img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.shatter .tiles{
  position: absolute; inset: 0; z-index: 3;
  display: grid;
  grid-template-rows: repeat(var(--shatter-rows), 1fr);
  grid-template-columns: repeat(var(--shatter-cols), 1fr);
  gap: var(--shatter-gap);
  pointer-events: none;
}

.shatter .tiles span{
  background: linear-gradient(135deg, var(--shard-color), rgba(255,255,255,0.02));
  border-radius: 2px;
  transform-origin: center;
}

/* Animations */
.shatter.shattered .tiles span{ animation: fly-away 900ms cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes fly-away{
  to{ transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.92); opacity: 0; filter: blur(2px); }
}

.shatter.reassembling .tiles span{ animation: fly-back 500ms cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes fly-back{
  from{ transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.92); opacity: 0; filter: blur(2px); }
  to{ transform: none; opacity: 1; filter: none; }
}

/* Zoom overlay */
.cover-zoom{
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.9);
  display: none;
  align-items: center; justify-content: center;
}
.cover-zoom.open{ display: flex; }
.cover-zoom img{
  max-width: 96vw; max-height: 96vh;
  transform: translate(var(--dx,0px), var(--dy,0px)) scale(var(--scale,1));
  transition: transform 120ms ease-out;
  cursor: zoom-in;
}

@media (max-width: 768px){
  .shatter{ min-height: 62vh; aspect-ratio: auto; }
}