/* v3.15 – same visuals as v3.14 */
:root {
  --lb-gold: #C9A227;
  --lb-gold-dark: #A88400;
  --lb-border: #e5e7eb;
  --lb-text: #111827;
  --lb-muted: #6b7280;
  --lb-bg: #ffffff;
  --lb-pill-grey: #e5e7eb;
}

#preview_slide_0.lbm3p-active > :not(.lbm3p-overlay) { display: none !important; }
#preview_slide_0 { position: relative; }

.lbm3p-overlay {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background: var(--lb-bg);
  border-radius: 0.75rem;
  border: 2px solid var(--lb-border);
  margin-top: 7vh;
}

/* Titles: non-italic */
.lbm3p-head { padding: 0.8rem 1rem 0; text-align: center; font-style: normal; }
.lbm3p-title { font-weight: 800; font-size: clamp(1.2rem, 1.6vw + 0.8rem, 1.6rem); color: var(--lb-text); font-style: normal; }
.lbm3p-sub   { font-weight: 400; font-size: clamp(.9rem, 1vw + .4rem, 1.05rem); color: var(--lb-muted); margin-top:.25rem; font-style: normal; }

.lbm3p-stage-wrap { position: relative; }
.lbm3p-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(0.9rem, 1.6vw, 1.6rem);
  align-items: center;
  justify-items: stretch;
  padding: 0 1rem;
}

.lbm3p-fade { position:absolute; inset: 0; background:#fff; opacity:0; pointer-events:none; transition: opacity .35s ease; border-radius:.75rem; }
.lbm3p-stage-wrap.fading .lbm3p-fade { opacity: 1; }

.lbm3p-vs {
  display:grid; place-items:center;
  width: clamp(68px, 7vw, 98px);
  height: clamp(68px, 7vw, 98px);
  border-radius: 999px;
  background: #f3f4f6; color: #000;
  font-weight: 900; font-size: clamp(0.9rem, 1vw + .4rem, 1.1rem);
  border: 2px solid var(--lb-pill-grey);
  align-self: center; justify-self: center;
}

.lbm3p-card { position: relative; display:block; background: var(--lb-bg); border-radius: .75rem; padding:0; cursor:pointer; transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease; box-shadow:0 2px 8px rgba(0,0,0,.06); border:3px solid transparent; overflow:visible; }
.lbm3p-card:hover { border-color: var(--lb-gold); box-shadow:0 10px 28px rgba(0,0,0,.12); }
.lbm3p-fig { overflow:hidden; border-radius: .75rem; background:#f3f4f6; aspect-ratio: 4 / 3; }
.lbm3p-fig img { width:100%; height:100%; object-fit:cover; display:block; }

/* Completed -> grey out images */
.lbm3p-overlay.completed .lbm3p-card { filter: grayscale(1) brightness(.9); pointer-events: none; } /* lock clicks when done */

.lbm3p-slots { display:flex; gap: clamp(0.8rem, 1.6vw, 1.6rem); padding: 0 1rem 1rem; flex-wrap:wrap; justify-content:center; }
.lbm3p-slot { width: clamp(90px, 11vw, 140px); height: clamp(90px, 11vw, 140px); border-radius: 999px; border: 3px solid #cbd5e1; background: #fff center/cover no-repeat; }
.lbm3p-slot.filled { border: none; }

.lbm3p-actions { padding: 0 1rem 1rem; text-align:center; }
.lbm3p-next {
  display:inline-flex; align-items:center; gap:.5rem;
  border:2px solid var(--lb-gold);
  background: linear-gradient(180deg, #d6b44a, var(--lb-gold-dark));
  color:#2d2200; padding: .55rem 1.05rem; border-radius: .55rem; font-weight:800; letter-spacing:.2px;
  font-size: clamp(0.9rem, 1vw + .4rem, 1.05rem);
  opacity:.45; pointer-events:none; transition:opacity .12s ease, transform .06s ease, box-shadow .12s ease;
  box-shadow: 0 4px 14px rgba(169,132,0,.28);
  font-style: normal;
}
.lbm3p-next.enabled { opacity:1; pointer-events:auto; }
.lbm3p-next:active { transform: translateY(1px); }
.lbm3p-small { margin-top:.35rem; font-size:.82rem; color: var(--lb-muted); font-style: normal; }

/* Fly morph clone */
.lbm3p-fly { position:fixed; z-index:9999; pointer-events:none; overflow:hidden; border-radius:.75rem; box-shadow:0 10px 25px rgba(0,0,0,.15); transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease, border-radius .45s ease, clip-path .45s ease; clip-path: inset(0 0 0 0 round .75rem); }
.lbm3p-fly.to-circle { border-radius: 9999px; clip-path: circle(50% at 50% 50%); }

@media (max-width: 900px) {
  .lbm3p-stage { grid-template-columns: 1fr; gap: 1rem; }
  .lbm3p-vs { justify-self:center; }
}

/* v3.17 overrides: Black & White Kontynuuj button + mobile scaling tweaks */
.lbm3p-actions .lbm3p-next {
  border: 2px solid #000 !important;
  background: #111 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.28) !important;
  border-radius: .5rem !important;
}
.lbm3p-actions .lbm3p-next.enabled { opacity: 1 !important; }
.lbm3p-actions .lbm3p-next:active { transform: translateY(1px); }

/* Mobile refinements */
@media (max-width: 768px) {
  .lbm3p-overlay { margin-top: 5vh; }
  .lbm3p-title { font-size: clamp(1.05rem, 4.5vw, 1.25rem); }
  .lbm3p-sub { font-size: clamp(.9rem, 3.8vw, 1.05rem); }

  .lbm3p-stage { grid-template-columns: 1fr; gap: 0.8rem; padding: 0 .5rem; }
  .lbm3p-vs { width: 64px; height: 64px; }

  .lbm3p-fig { aspect-ratio: 4 / 3; }
  .lbm3p-slots { gap: .8rem; padding: 0 .5rem .8rem; }
  .lbm3p-slot { width: clamp(72px, 22vw, 110px); height: clamp(72px, 22vw, 110px); }
  .lbm3p-actions { padding: 0 .5rem 1rem; }
  .lbm3p-next { padding: .55rem 1rem; font-size: 1rem; }
}

/* Very small phones */
@media (max-width: 380px) {
  .lbm3p-vs { width: 56px; height: 56px; }
  .lbm3p-slot { width: 64px; height: 64px; }
}