/* MYBC prelanders, round 4: the stripped, icon-free win popup + (until each page converts) the stage offer badge. Additive: plw-*, pl-offer,
   pl-tiles. Pairs with kit/win.js. Feel copied from the live shop "won" dialog (daily-lucky-spin.css):
   .xg-won-art::before radial gold bloom, xgwon enter on cubic-bezier(.3,.7,.4,1), dim rgba(8,6,20,.72) + blur 6px,
   the live CTA sheen. */

/* ---------- stage: offer badge (replaces the sub line's offer) ---------- */
.pl-offer { display: inline-flex; align-items: center; gap: 8px; margin: 10px auto 0; padding: 4px 14px 4px 5px; max-width: 100%;
  border-radius: 999px; border: 1px solid rgba(255, 181, 33, .35); background: rgba(21, 19, 47, .78);
  box-shadow: inset 0 0 16px rgba(255, 181, 33, .16), 0 6px 18px rgba(8, 6, 20, .35);
  font: 700 12.5px/1.15 var(--pl-font); color: #fff; text-align: left; letter-spacing: 0; }
.pl-offer:empty { display: none; }
.pl-offer img { flex: none; width: 30px; height: 30px; margin: -2px 0; filter: drop-shadow(0 2px 6px rgba(255, 181, 33, .35)); }
.pl-offer b { font-size: 18px; font-weight: 800; color: var(--pl-gold); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-theatre__head .pl-offer + * { margin-top: 0; }
@media (max-width: 380px) { .pl-offer { font-size: 11.5px; padding-right: 10px; gap: 6px; } .pl-offer b { font-size: 16px; } }

/* ---------- stage: reward tiles (the bundle parts, same icons as the popup) ---------- */
.pl-prizes.pl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 440px; margin: 0 auto; flex-wrap: nowrap; }
.pl-prizes.pl-tiles li { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; padding: 8px 4px 7px; border-radius: 10px;
  background: rgba(21, 19, 47, .82); border: 1px solid rgba(255, 181, 33, .32); color: #fff; font-size: 12px; line-height: 1.15; font-weight: 700; text-align: center; }
.pl-tiles img { width: 28px; height: 28px; }
.pl-tiles span { display: grid; gap: 1px; min-width: 0; }
.pl-tiles span > b { font-size: 12px; font-weight: 800; color: #fff; }
.pl-tiles span > b b { color: var(--pl-gold); }
.pl-tiles small { font-size: 10.5px; font-weight: 600; color: var(--pl-text-2); }
.pl-prizes.pl-tiles li.is-hit { color: #fff; background: rgba(255, 181, 33, .14); border-color: var(--pl-gold); box-shadow: inset 0 0 14px rgba(255, 181, 33, .3); }

/* ---------- popup ---------- */
html.plw-lock, html.plw-lock body { overflow: hidden; }
.plw { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; }
.plw[hidden] { display: none; }
.plw__dim { position: absolute; inset: 0; background: rgba(8, 6, 20, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.plw__fx { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.plw__box { position: relative; z-index: 2; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden auto;
  overscroll-behavior: contain; scrollbar-width: none; padding: 16px 20px 14px; border-radius: 20px; background: #201d47; border: 1px solid #3b376c;
  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05); text-align: center; color: #fff; outline: none; }
.plw__box::-webkit-scrollbar { display: none; }
.plw.is-open .plw__dim { animation: plw-fade .3s ease-out both; }
.plw.is-open .plw__box { animation: plw-in .42s cubic-bezier(.3, .7, .4, 1) both; }
.plw.is-open .plw__lines li { animation: plw-line .4s cubic-bezier(.3, .7, .4, 1) backwards; }
.plw.is-open .plw__lines li:nth-child(1) { animation-delay: .14s; }
.plw.is-open .plw__lines li:nth-child(2) { animation-delay: .26s; }
.plw.is-open .plw__lines li:nth-child(3) { animation-delay: .38s; }
.plw.is-again .plw__lines li { animation: none; }
@keyframes plw-fade { from { opacity: 0; } }
@keyframes plw-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes plw-line { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

.plw__x { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border-radius: 8px; border: 1px solid #3b376c; background: rgba(0, 0, 0, .2); color: #c2c5d6; cursor: pointer; }
.plw__x:hover { color: #fff; background: rgba(0, 0, 0, .34); }
.plw__x:focus-visible, .plw-bar button:focus-visible, .plw-bar a:focus-visible { outline: 2px solid var(--pl-gold); outline-offset: 2px; }

.plw__title { margin: 6px 0 0; font-size: 30px; line-height: 1; font-weight: 900; letter-spacing: -.015em; outline: none; }
.plw__lines { list-style: none; margin: 14px 0 16px; padding: 0; display: grid; }
.plw__lines li { padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 18px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.plw__lines b { color: var(--pl-gold); font-size: 1.3em; font-variant-numeric: tabular-nums; }

.plw__cta { width: 100%; height: 52px; }
.plw__cta::after { animation: plw-sheen 4s cubic-bezier(.32, .72, 0, 1) .6s infinite; }
@keyframes plw-sheen { 0% { transform: translate3d(-160%, 0, 0); } 25%, 100% { transform: translate3d(340%, 0, 0); } }
@media (min-width: 600px) { .plw__box { padding: 20px 28px 18px; } }

/* ---------- after closing: slim reward bar under the stage (sticks to the bottom while scrolling) ---------- */
.plw-bar { position: sticky; bottom: 10px; z-index: 50; display: flex; align-items: center; gap: 8px; margin: 10px 12px; padding: 6px 6px 6px 8px;
  border-radius: 14px; background: #201d47; border: 1px solid rgba(255, 181, 33, .45); box-shadow: 0 12px 30px rgba(8, 6, 20, .55); animation: pl-rise .4s cubic-bezier(.16, 1, .3, 1) both; }
.plw-bar[hidden] { display: none; }
.plw-bar__open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer;
  font: 700 12.5px/1.25 var(--pl-font); }
.plw-bar__open b { color: var(--pl-gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.plw-bar__cta { flex: none; display: grid; place-items: center; height: 38px; padding: 0 16px; border-radius: 8px; font: 800 14px/1 var(--pl-font); color: #fff;
  text-decoration: none; background: linear-gradient(192deg, #FFB521, #FF7B17); }
@media (min-width: 960px) { .plw-bar { margin: 12px 0; } }

/* reduced motion: popup appears instantly, no stagger, no sheen loop */
.pl-reduced .plw.is-open .plw__dim, .pl-reduced .plw.is-open .plw__box, .pl-reduced .plw.is-open .plw__lines li, .pl-reduced .plw__cta::after, .pl-reduced .plw-bar { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .plw.is-open .plw__dim, .plw.is-open .plw__box, .plw.is-open .plw__lines li, .plw__cta::after, .plw-bar { animation: none; }
}

/* the stage CTA keeps the live sheen sweep, every 4 s */
.pl-theatre__panel .pl-btn--live:not([disabled])::after { animation: plw-sheen 4s cubic-bezier(.32, .72, 0, 1) 1.2s infinite; }
.pl-reduced .pl-theatre__panel .pl-btn--live::after { animation: none; }