/* Playground page (opened from the header link): a pannable canvas of cards */
.page-playground {
  --pg-bg: #fafafa;
  --pg-dot: #d4d4d8;
  --pg-muted: #9a9aa2;
  --pg-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.08);
  --pg-shadow-lift: 0 4px 8px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 0, 0, 0.2);

  height: 100vh;
  overflow: hidden;
  background-color: var(--pg-bg);
}

/* Sticky back button, top left */
.btn-back {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem 0.6rem 0.85rem;
  border: 1.5px solid rgba(28, 27, 25, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background-color 0.15s, border-color 0.15s;
}
.btn-back:hover { background-color: #fff; border-color: rgba(28, 27, 25, 0.3); }
.btn-back:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.btn-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Canvas: the viewport you drag around. The dotted grid moves with it (js/modules/canvas.js sets --pan-x/--pan-y) */
.pg-canvas {
  --pan-x: 0px;
  --pan-y: 0px;
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background-image: radial-gradient(circle, var(--pg-dot) 1px, transparent 1.4px);
  background-size: 37.5px 37.5px;
  background-position: calc(50% + var(--pan-x)) calc(50% + var(--pan-y));
}
.pg-canvas:focus-visible { outline: none; }
.pg-canvas.is-panning { cursor: grabbing; }

/* World origin sits at the screen center; everything inside moves together */
.pg-world {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(var(--pan-x), var(--pan-y));
}

/* Heading stays centered on the origin, above the cards, and lets drags pass through */
.playground-intro {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5000;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.playground-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 4.6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #111;
}

.playground-sub {
  margin-top: 1.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--pg-muted);
}

/* Cards */
.pg-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h, auto);
  border-radius: 14px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: var(--pg-shadow);
  cursor: grab;
  transform: rotate(var(--r, 0deg));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.pg-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Hover: straighten fully (tilt goes to 0), lift and grow */
@media (hover: hover) {
  .pg-canvas:not(.is-panning) .pg-card:hover {
    transform: rotate(0deg) translateY(-6px) scale(1.04);
    box-shadow: var(--pg-shadow-lift);
  }
}

/* Being dragged: picked up */
.pg-card.is-dragging,
.pg-card.is-dragging:hover {
  cursor: grabbing;
  transform: rotate(0deg) scale(1.06);
  box-shadow: var(--pg-shadow-lift);
}

@media (max-width: 640px) {
  .btn-back { top: 1rem; left: 1rem; }
}

/* Text card: same color as the page, flat until hovered */
.pg-note {
  padding: 1.5rem 1.75rem;
  background-color: var(--pg-bg);
  box-shadow: none; /* shadow only shows on hover / drag */
  color: var(--pg-muted);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.55;
}
/* Only the main point is in full ink */
.pg-note strong { color: var(--color-ink); font-weight: 400; }

/* Stack card: several images that move as one card. The card itself is invisible; each image is its own little card */
.pg-stack {
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.pg-stack .pg-stack-item {
  position: absolute;
  width: var(--iw);
  height: var(--ih);
  border-radius: 14px;
  box-shadow: var(--pg-shadow);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* No lift shadow on the invisible card itself; the images carry their own */
.pg-canvas:not(.is-panning) .pg-stack:hover,
.pg-stack.is-dragging,
.pg-stack.is-dragging:hover { box-shadow: none; }

/* Clover stack: three screens, the middle one in front, the outer two peeking out tilted. Opens up a bit on hover */
.pg-stack--clover { --spread: 1; }
.pg-stack--clover .pg-stack-item {
  top: 15px;
  left: 50%;
  margin-left: calc(var(--iw) / -2);
  transform: translateX(calc(var(--dx) * var(--spread))) rotate(calc(var(--dr) * var(--spread)));
}
@media (hover: hover) {
  .pg-canvas:not(.is-panning) .pg-stack--clover:hover { --spread: 1.3; }
}

/* Pile: images stacked on top of each other with a slight offset; on hover they fan out just a little */
.pg-stack--pile .pg-stack-item {
  top: 24px;
  left: 0;
  transform: translate(calc(var(--i) * 5px), calc(var(--i) * -3px)) rotate(calc(var(--i) * 0.8deg));
  transition-delay: calc(var(--i) * 15ms);
}
@media (hover: hover) {
  .pg-canvas:not(.is-panning) .pg-stack--pile:hover .pg-stack-item {
    transform: translate(calc(var(--i) * 22px), calc(var(--i) * -3px)) rotate(calc(var(--i) * 1.5deg));
  }
}

/* Bare card: transparent image (e.g. an app icon) shown without the white card behind it;
   the shadow follows the image's own shape instead of a box */
.pg-card--bare,
.pg-canvas:not(.is-panning) .pg-card--bare:hover,
.pg-card--bare.is-dragging,
.pg-card--bare.is-dragging:hover {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.pg-card--bare img {
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.12));
  transition: filter 0.25s ease;
}
.pg-card--bare:hover img,
.pg-card--bare.is-dragging img {
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.22));
}

/* Sticky hint, bottom center: quiet, and lets drags pass through to the canvas */
.pg-hint {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 10;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(250, 250, 250, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--pg-muted);
  font-size: 0.8rem;
  font-weight: 400;
  white-space: nowrap;
  pointer-events: none;
}
.pg-hint svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 640px) {
  .pg-hint { bottom: 1rem; }
}

/* Yellow sticky note with a handwritten message. The top right corner is cut off and a darker
   flap (::after) fills it, so it looks folded. Shadows use drop-shadow so they follow the cut shape */
.pg-sticky {
  --fold: 28px;
  --sticky: #fde68a;
  display: flex;
  align-items: center;
  padding: 1.25rem 1.3rem;
  border-radius: 12px;
  background: linear-gradient(225deg, transparent calc(var(--fold) * 0.7071), var(--sticky) 0);
  box-shadow: none;
  filter: drop-shadow(0 6px 12px rgba(120, 90, 0, 0.16));
  color: #3a3320;
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.15;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
}
.pg-sticky::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--fold);
  height: var(--fold);
  border-bottom-left-radius: 6px;
  background: linear-gradient(45deg, #ecc94b 50%, transparent 50%);
  filter: drop-shadow(-2px 2px 2px rgba(120, 90, 0, 0.2));
}
.pg-canvas:not(.is-panning) .pg-sticky:hover,
.pg-sticky.is-dragging,
.pg-sticky.is-dragging:hover {
  box-shadow: none;
  filter: drop-shadow(0 18px 26px rgba(120, 90, 0, 0.24));
}