/* MoonTik — panneaux de cadeaux (overlay + éditeur) */
.pn-stage { position: absolute; inset: 0; overflow: visible; }
.pn-stage.has-bg { border-radius: 0; }
.pn-stage.has-bg::before { content: ""; position: absolute; inset: 0; border-radius: 18px; background: inherit; z-index: 0; pointer-events: none; }
.pn-it { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); user-select: none; overflow: visible; }
.pn-it img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); pointer-events: none; }
.pn-it .em { font-size: calc(var(--w) * .7); line-height: 1; }
.pn-tx {
  position: absolute; left: 50%; top: calc(100% + (var(--lh, 1) - 1) * 1.15em + var(--tx-y, -4%));
  transform: translate(-50%, 0); z-index: 4;
  text-align: center; line-height: var(--lh, .95); white-space: nowrap;
  paint-order: stroke fill; margin: 0; width: max-content; max-width: none;
  overflow: visible; pointer-events: none;
}
.pn-tx .l1 { display: block; }
.pn-anim-pulse .pn-it { animation: pnp 1.8s ease-in-out infinite; }
.pn-anim-float .pn-it { animation: pnf 2.6s ease-in-out infinite; }
@keyframes pnp { 50% { transform: translate(-50%, -50%) scale(1.08); } }
@keyframes pnf { 50% { transform: translate(-50%, calc(-50% - 6px)); } }
.pn-it.sel { outline: 2px solid #8b5cf6; outline-offset: 3px; border-radius: 6px; }
.pn-it.sel::after { content: ""; position: absolute; inset: -7px; border: 2px solid #fff0; background:
  radial-gradient(circle, #fff 3px, transparent 3.5px) 0 0 / 100% 100% no-repeat; pointer-events: none; }

.pn-ico { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.pn-tile {
  position: absolute; inset: 0; border-radius: 22%;
  background: linear-gradient(145deg, var(--tile1, #7c3aed), var(--tile2, #f472b6));
  opacity: var(--tile-op, .92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -8px 14px rgba(0,0,0,.28),
    inset 0 0 0 2px rgba(255,255,255,.28),
    0 6px 12px rgba(0,0,0,.35);
  pointer-events: none;
}
.pn-tile::before {
  content: ""; position: absolute; inset: 10% 12% auto 12%; height: 28%;
  border-radius: 40% 40% 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events: none;
}
.pn-tile::after {
  content: "✦"; position: absolute; right: 10%; top: 8%;
  font-size: 28%; line-height: 1; color: #fff8d0;
  text-shadow: 0 0 6px #ffe27a; opacity: .9; pointer-events: none;
}
.pn-it.has-tile img, .pn-it.has-tile .em {
  position: relative; z-index: 1; width: 78%; aspect-ratio: 1;
  object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.pn-it.has-tile .em { width: auto; font-size: calc(var(--w) * .55); }
