:root {
  --ring: rgba(0,0,0,.14);
  --ring-strong: rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #ededf1;
  color: #111;
}

.wrap {
  max-width: 980px;
  margin: 24px auto 48px;
  padding: 16px;
}

.poster-stage {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 900px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px var(--ring);
  background: #ddd;
}

.poster-base {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none; /* csak az overlay fecnik legyenek kattinthatók */
}

/* Fecnik overlay */
.tab {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-origin: border-box;
  border-radius: 6px;
  box-shadow: 0 10px 28px var(--ring), 0 2px 8px var(--ring-strong);
  cursor: grab;
  touch-action: none;
  will-change: transform;
  transition: transform .25s ease, opacity .25s ease;
}
.tab:active { cursor: grabbing; }
.tab.torn { pointer-events: none; }

/* Hoverkor enyhe "hintázás" */
.tab:hover {
  transform: translateY(-3px) rotate(-1.5deg);
}

/* Debug mód (/#debug) → látszanak a keretek */
body.debug .tab {
  outline: 2px dashed rgba(0,0,0,.5);
  outline-offset: -2px;
}

.hint {
  text-align: center;
  opacity: .7;
  font-size: .95rem;
  margin-top: 10px;
}

/* Mobil */
@media (max-width:600px) {
  .wrap { padding: 10px; }
  .hint { font-size: .9rem; }
}