/* Owed — Plinko offer popup (js/plinko.js). Builds on .owpop from styles.css. */
.plk .plk__card { width: min(460px, 100%); padding: 22px 22px 22px; overflow: hidden; background: #fff; }
.plk__x { z-index: 3; }
.plk__head { text-align: center; padding: 8px 6px 14px; transition: opacity 300ms ease, transform 300ms ease; }
.plk__kicker { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #eef3ff; color: var(--blue, #0051ff); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.plk__head h3 { margin: 12px 0 6px; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.plk__head p { margin: 0; font-size: 15px; color: var(--ink-2, #454b58); }
/* board */
.plk__board { position: relative; height: 350px; border-radius: 20px; overflow: hidden; background: none; cursor: pointer; transition: opacity 300ms ease, transform 300ms ease; }
.plk__canvas { display: block; width: 100%; }
.plk__slots { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; padding: 0 4px 6px; }
.plk__slot { --c: hsl(calc(226 + var(--i) * 5), 90%, calc(52% + var(--i) * 3%)); display: grid; place-items: center; height: 38px; border-radius: 9px; background: var(--c); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 30, 120, .18); transform-origin: 50% 100%; }
.plk__slot--win { background: linear-gradient(180deg, #ffd66b, #f2a800); color: #3a2600; font-size: 14px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 230, 150, .7), 0 2px 10px rgba(255, 200, 60, .55); }
.plk__slot.is-hit { animation: plk-slot 700ms cubic-bezier(.34, 1.56, .64, 1) both; box-shadow: 0 0 0 2px #fff, 0 0 26px 6px rgba(255, 190, 40, .75); }
@keyframes plk-slot { 0% { transform: scaleY(1); } 30% { transform: scaleY(.72); } 60% { transform: scaleY(1.22); } 100% { transform: scaleY(1); } }
/* tap-to-drop overlay: a pointing hand that taps, with a ripple */
.plk__tap { position: absolute; left: 50%; top: 46%; translate: -50% -50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 26px 16px; border: 0; border-radius: 22px; background: rgba(255, 255, 255, .94); color: var(--ink, #121212); font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 18px 44px -18px rgba(0, 40, 140, .45), 0 0 0 1px rgba(0, 81, 255, .12); transition: opacity 250ms ease, transform 250ms ease; }
.plk__tap:hover { transform: scale(1.03); }
.plk__hand { position: relative; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--blue, #0051ff); color: #fff; }
.plk__hand svg { width: 30px; height: 30px; animation: plk-tap 1.4s ease-in-out infinite; }
.plk__hand i { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(0, 81, 255, .55); animation: plk-ripple 1.4s ease-out infinite; }
@keyframes plk-tap { 0%, 100% { transform: translateY(-3px) rotate(-8deg); } 45%, 55% { transform: translateY(4px) rotate(0deg) scale(.94); } }
@keyframes plk-ripple { 0%, 40% { transform: scale(.8); opacity: 0; } 55% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
.plk__board.is-dropping .plk__tap { opacity: 0; transform: scale(.9); pointer-events: none; }
/* win view */
.plk__win { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 46px 28px 24px; background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #f6f8ff 55%, #eef2ff 100%); color: var(--ink, #121212); opacity: 0; transform: translateY(24px) scale(.98); transition: opacity 380ms ease, transform 380ms cubic-bezier(.2, .9, .3, 1.15); }
.plk.is-won .plk__win { opacity: 1; transform: none; }
.plk.is-won .plk__head, .plk.is-won .plk__board { opacity: 0; transform: scale(.98); pointer-events: none; }
.plk__top { position: relative; flex: 1 1 auto; width: 100%; min-height: 150px; display: grid; place-items: center; }
.plk__burst { position: absolute; left: 50%; top: 50%; width: 380px; height: 380px; translate: -50% -50%; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 190, 40, .28) 0deg 8deg, rgba(255, 190, 40, 0) 8deg 24deg); -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .5) 40%, transparent 70%); mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .5) 40%, transparent 70%); animation: plk-burst 40s linear infinite; }
@keyframes plk-burst { to { rotate: 360deg; } }
.plk__badge { position: relative; display: inline-block; padding: 14px 26px; border-radius: 999px; background: linear-gradient(180deg, #ffd66b, #f2a800); color: #3a2600; font-size: 34px; font-weight: 900; letter-spacing: -0.03em; box-shadow: 0 16px 40px -14px rgba(255, 190, 40, .8), inset 0 1px 0 rgba(255, 255, 255, .55); animation: plk-badge 700ms cubic-bezier(.34, 1.56, .64, 1) 120ms both; }
@keyframes plk-badge { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.plk__body { position: relative; flex: none; width: 100%; display: flex; flex-direction: column; align-items: center; }
.plk__win h3 { margin: 0 0 10px; font-size: 29px; line-height: 1.12; letter-spacing: -0.025em; color: var(--ink, #121212); }
.plk__win p { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: var(--ink-2, #454b58); }
.plk__win p b { color: var(--ink, #121212); }
.plk .plk__cta, .plk .plk__cta:hover { position: relative; overflow: hidden; width: 100%; background: linear-gradient(180deg, #ffd66b, #f2a800); color: #3a2600; border-color: #f2a800; box-shadow: 0 14px 30px -14px rgba(255, 190, 40, .85), inset 0 1px 0 rgba(255, 255, 255, .55); transition: transform 160ms ease, box-shadow 160ms ease; }   /* gold, no outline hover */
.plk .plk__cta:hover { transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(255, 190, 40, .95), inset 0 1px 0 rgba(255, 255, 255, .55); }
.plk__cta::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 40%; background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); transform: skewX(-20deg); opacity: 0; pointer-events: none; }
.plk__cta:hover::after { animation: plk-shine 750ms ease-out; }
@keyframes plk-shine { 0% { left: -60%; opacity: 0; } 15% { opacity: .95; } 100% { left: 130%; opacity: 0; } }
.plk__alt { position: relative; margin-top: 12px; border: 0; background: none; color: var(--ink-3, #6b7280); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .plk .plk__card { padding: 18px 14px 18px; }
  .plk__board { height: 310px; }
  .plk__slot { height: 34px; font-size: 11.5px; border-radius: 8px; }
  .plk__slot--win { font-size: 12.5px; }
  .plk__head h3 { font-size: 23px; }
  .plk__badge { font-size: 30px; }
  .plk__win h3 { font-size: 25px; }
  .plk__win { padding: 40px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) { .plk__burst, .plk__badge, .plk__slot.is-hit { animation: none; } .plk__win { transition: none; } }