/* ============================================================
   JANMASHTAMI CAMPAIGN — "MATKI FODO & WIN"  (v2)
   Scoped entirely under .wwjm-* / #wwjm-* — safe to drop in
   alongside style.css / style2.css / style3.css without
   touching any of them.

   Brand colors reused from the main site:
     Blue   #053779
     Yellow #fed001

   v2 changes vs v1:
     - teaser lamp emoji -> CSS mini-Matki icon
     - cracks are now persistent/progressive (wwjm-level-1/2/3)
     - shake is a separate, independently-replayable class
     - impact ring + sound-toggle button styles added
     - fixed double scrollbar (overflow-x + decor clipping layer)
   ============================================================ */

.wwjm-teaser, .wwjm-overlay, .wwjm-backdrop, .wwjm-card * {
  box-sizing: border-box;
}

/* ---------- Floating teaser ---------- */
.wwjm-teaser {
  position: fixed;
  left: 16px;
  bottom: 24px;
  z-index: 9600;
  display: flex;
  align-items: stretch;
  max-width: 300px;
  background: linear-gradient(135deg, #053779 0%, #0a4fa8 100%);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(5, 55, 121, 0.35);
  overflow: hidden;
  animation: wwjm-teaser-in .5s cubic-bezier(.22,1,.36,1) both;
}

@keyframes wwjm-teaser-in {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.wwjm-teaser-open {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 12px 10px 12px 14px;
  cursor: pointer;
  text-align: left;
  color: #fff;
  flex: 1;
  font: inherit;
}

/* Mini CSS Matki used in the teaser — replaces the lamp emoji */
.wwjm-teaser-matki {
  position: relative;
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: block;
  animation: wwjm-teaser-matki-bob 2.4s ease-in-out infinite;
}
@keyframes wwjm-teaser-matki-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%       { transform: translateY(-3px) rotate(4deg); }
}
.wwjm-teaser-matki-glow {
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254,208,1,.55), transparent 70%);
  animation: wwjm-teaser-glow 2.4s ease-in-out infinite;
}
@keyframes wwjm-teaser-glow { 0%,100% { opacity:.5; } 50% { opacity:1; } }
.wwjm-teaser-matki-rim {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 5px; background: #7a4a24; border-radius: 50%;
}
.wwjm-teaser-matki-neck {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 6px; background: linear-gradient(180deg,#c4732f,#a85a22);
}
.wwjm-teaser-matki-body {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 24px;
  background: radial-gradient(circle at 35% 30%, #e0894a, #b05a24 75%);
  border-radius: 50% 50% 46% 46% / 62% 62% 40% 40%;
  box-shadow: inset -3px -4px 6px rgba(0,0,0,.25);
}
.wwjm-teaser-matki-spark {
  position: absolute; top: -2px; right: -2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff8d6;
  box-shadow: 0 0 6px 2px rgba(255,248,214,.9);
  animation: wwjm-teaser-spark 2.4s ease-in-out infinite;
}
@keyframes wwjm-teaser-spark { 0%,100% { opacity:0; transform: scale(.4);} 50% { opacity:1; transform: scale(1);} }

.wwjm-teaser-copy {
  display: flex;
  flex-direction: column;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: 12px;
  line-height: 1.35;
}
.wwjm-teaser-copy strong {
  font-size: 12.5px;
  color: #fed001;
  letter-spacing: .02em;
}

.wwjm-teaser-cta {
  align-self: center;
  background: #fed001;
  color: #053779;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 8px 10px;
  border-radius: 10px;
  white-space: nowrap;
  margin-left: 4px;
}

.wwjm-teaser-close {
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  width: 30px;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 15px;
  opacity: .8;
}
.wwjm-teaser-close:hover { opacity: 1; background: rgba(255,255,255,0.22); }
.wwjm-teaser-close:focus-visible,
.wwjm-teaser-open:focus-visible {
  outline: 2px solid #fed001;
  outline-offset: -2px;
}

/* Collapsed state — small round re-open chip (after dismiss, or once played) */
.wwjm-teaser.wwjm-teaser-collapsed {
  max-width: 58px;
  border-radius: 50%;
}
.wwjm-teaser-collapsed .wwjm-teaser-open {
  padding: 14px;
  justify-content: center;
}
.wwjm-teaser-collapsed .wwjm-teaser-copy,
.wwjm-teaser-collapsed .wwjm-teaser-cta,
.wwjm-teaser-collapsed .wwjm-teaser-close {
  display: none;
}
.wwjm-teaser-collapsed .wwjm-teaser-matki { width: 26px; height: 26px; }

@media (max-width: 575px) {
  .wwjm-teaser { left: 12px; bottom: 18px; max-width: 260px; }
}

/* ---------- Backdrop & overlay ---------- */
.wwjm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(5, 15, 40, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.wwjm-backdrop.wwjm-on { opacity: 1; pointer-events: auto; }

.wwjm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.wwjm-overlay.wwjm-on { opacity: 1; pointer-events: auto; }

/* FIX (overflow bug): overflow-x must be explicitly hidden. Leaving it
   unset meant the browser computed it as "auto" (a value on one axis
   can't stay "visible" once the other axis isn't "visible"), and the
   absolutely-positioned decor icons below were being counted inside
   that scrollable region — causing both the horizontal AND the extra
   vertical scrollbar seen in testing. */
.wwjm-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, #fffdf5 0%, #fff 40%);
  border-radius: 26px;
  padding: 46px 30px 34px;
  text-align: center;
  transform: translateY(24px) scale(.96);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 40px 100px rgba(5,15,40,.4);
  border: 1px solid rgba(254,208,1,.5);
}
.wwjm-overlay.wwjm-on .wwjm-card { transform: translateY(0) scale(1); }

.wwjm-close, .wwjm-sound-toggle {
  position: absolute;
  top: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: #053779;
  font-size: 15px;
  cursor: pointer;
  z-index: 2;
  transition: transform .25s, background .2s;
}
.wwjm-close { right: 14px; }
.wwjm-close:hover { background: #e2e8f0; transform: rotate(90deg); }
.wwjm-close:focus-visible { outline: 2px solid #053779; outline-offset: 2px; }

.wwjm-sound-toggle { left: 14px; font-size: 16px; }
.wwjm-sound-toggle:hover { background: #e2e8f0; }
.wwjm-sound-toggle:active { transform: scale(.92); }
.wwjm-sound-toggle:focus-visible { outline: 2px solid #053779; outline-offset: 2px; }

/* FIX (overflow bug): decorative feather/flute now live in their own
   absolutely-positioned, overflow:hidden layer that's the same size
   as the card. They can still visually "bleed" toward the card edge,
   but they're clipped there instead of expanding the card's own
   scrollable content box. pointer-events:none keeps them non-interactive. */
.wwjm-decor-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.wwjm-decor {
  position: absolute; font-size: 90px; opacity: .12;
  line-height: 1;
}
.wwjm-decor-feather { top: -14px; left: -18px; transform: rotate(-18deg); }
.wwjm-decor-feather::before { content: '🪶'; }
.wwjm-decor-flute { bottom: -10px; right: -16px; transform: rotate(20deg); }
.wwjm-decor-flute::before { content: '🪈'; }

.wwjm-panel { position: relative; z-index: 1; }

/* ---------- Game panel ---------- */
.wwjm-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: #f0f4ff; border: 1px solid #d0dbf5;
  border-radius: 20px; padding: 4px 12px 4px 8px; margin-bottom: 14px;
  font-family: 'Trebuchet MS', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #053779;
}
.wwjm-badge-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #fed001;
  animation: wwjm-blink 2.4s ease infinite;
}
@keyframes wwjm-blink {
  0%,100% { box-shadow: 0 0 0 3px rgba(254,208,1,.28); }
  50%      { box-shadow: 0 0 0 7px rgba(254,208,1,.06); }
}

.wwjm-game-panel h2, .wwjm-reward-panel h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.6rem; color: #0d1f3c; margin-bottom: 8px; line-height: 1.2;
}
.wwjm-sub {
  font-family: 'Trebuchet MS', sans-serif; font-size: .9rem;
  color: #556; margin-bottom: 18px;
}

.wwjm-stage {
  position: relative;
  height: 260px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  margin: 0 auto 10px;
}

.wwjm-rope {
  width: 3px; height: 46px;
  background: linear-gradient(#8a5a2b, #b07d3f);
  margin-bottom: -2px;
}

.wwjm-matki {
  position: relative;
  width: 128px; height: 132px;
  cursor: pointer;
  transform-origin: top center;
  animation: wwjm-sway 3.2s ease-in-out infinite;
}
.wwjm-matki:focus-visible { outline: 3px solid #053779; outline-offset: 6px; border-radius: 50%; }

@keyframes wwjm-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%       { transform: rotate(3deg); }
}

/* Small expanding ring on every tap — quick "impact" feedback */
.wwjm-impact-ring {
  position: absolute; left: 50%; top: 62%; width: 10px; height: 10px;
  border: 2px solid rgba(254,208,1,.9); border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.wwjm-impact-ring.wwjm-ping { animation: wwjm-ping .5s ease-out; }
@keyframes wwjm-ping {
  0%   { transform: translate(-50%,-50%) scale(.3); opacity: .9; }
  100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; }
}

.wwjm-matki-rim {
  width: 54px; height: 14px; margin: 0 auto;
  background: #7a4a24; border-radius: 50%;
}
.wwjm-matki-neck {
  width: 36px; height: 18px; margin: -4px auto 0;
  background: linear-gradient(180deg,#c4732f,#a85a22);
}
.wwjm-matki-body {
  position: relative;
  width: 128px; height: 108px; margin-top: -2px;
  background: radial-gradient(circle at 35% 30%, #e0894a, #b05a24 75%);
  border-radius: 50% 50% 46% 46% / 62% 62% 40% 40%;
  box-shadow: inset -10px -14px 24px rgba(0,0,0,.25), inset 8px 10px 16px rgba(255,255,255,.25);
  overflow: hidden;
  transition: transform .15s ease, opacity .3s ease;
}
.wwjm-matki-band {
  position: absolute; left: 0; right: 0; top: 38%;
  height: 8px; background: rgba(255,255,255,.35);
  z-index: 1;
}

/* ---------- Progressive, PERSISTENT cracks (SVG) ----------
   These classes (wwjm-level-1/2/3) are only ever ADDED by JS, never
   removed between taps — so once a crack appears it stays and only
   grows. Shake is a separate class (wwjm-shake-1/2/3) toggled off/on
   independently, so replaying the shake never resets crack state. */
.wwjm-crack {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
}
.wwjm-crack path {
  fill: none;
  stroke: #3a1c08;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  opacity: 0;
  transition: stroke-dashoffset .35s ease, opacity .2s ease;
}

/* Level 1 — first tap: one small crack appears, ~40% revealed */
.wwjm-matki.wwjm-level-1 .wwjm-crack-1 path { opacity: .85; stroke-dashoffset: 96; }

/* Level 2 — second tap: crack-1 extends further, crack-2 branch appears */
.wwjm-matki.wwjm-level-2 .wwjm-crack-1 path { stroke-dashoffset: 30; }
.wwjm-matki.wwjm-level-2 .wwjm-crack-2 path { opacity: .85; stroke-dashoffset: 60; }

/* Level 3 — third tap: both cracks fully revealed, small branch crack-3 appears */
.wwjm-matki.wwjm-level-3 .wwjm-crack-1 path,
.wwjm-matki.wwjm-level-3 .wwjm-crack-2 path { stroke-dashoffset: 0; }
.wwjm-matki.wwjm-level-3 .wwjm-crack-3 path { opacity: .85; stroke-dashoffset: 0; }

/* ---------- Shake (transient, replayable, independent of cracks) ---------- */
.wwjm-matki.wwjm-shake-1 .wwjm-matki-body { animation: wwjm-shake .3s ease; }
.wwjm-matki.wwjm-shake-2 .wwjm-matki-body { animation: wwjm-shake .4s ease; }
.wwjm-matki.wwjm-shake-3 .wwjm-matki-body { animation: wwjm-shake-strong .5s ease; }

@keyframes wwjm-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-3deg); }
  40% { transform: translateX(5px) rotate(3deg); }
  60% { transform: translateX(-4px) rotate(-2deg); }
  80% { transform: translateX(3px) rotate(2deg); }
}
@keyframes wwjm-shake-strong {
  0%, 100% { transform: translateX(0) scale(1); }
  15% { transform: translateX(-9px) rotate(-5deg) scale(1.02); }
  35% { transform: translateX(8px) rotate(5deg) scale(1.02); }
  55% { transform: translateX(-7px) rotate(-4deg); }
  75% { transform: translateX(6px) rotate(4deg); }
  90% { transform: translateX(-3px); }
}

.wwjm-matki.wwjm-broken .wwjm-matki-body,
.wwjm-matki.wwjm-broken .wwjm-matki-neck,
.wwjm-matki.wwjm-broken .wwjm-matki-rim {
  transform: scale(.5);
  opacity: 0;
}
.wwjm-matki.wwjm-broken { animation: none; pointer-events: none; }

/* Shards & water drops, spawned by JS on the final hit */
.wwjm-shards, .wwjm-drops {
  position: absolute; inset: 0; pointer-events: none; overflow: visible;
}
.wwjm-shard {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 12px;
  background: linear-gradient(135deg,#e0894a,#a85a22);
  border-radius: 2px;
  animation: wwjm-shard-fly .7s ease-out forwards;
}
@keyframes wwjm-shard-fly {
  to { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); opacity: 0; }
}
.wwjm-drop {
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 10px;
  background: #4fa3e0;
  border-radius: 50% 50% 50% 0;
  animation: wwjm-drop-fall .8s ease-in forwards;
}
@keyframes wwjm-drop-fall {
  to { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}

.wwjm-taps { font-family: 'Trebuchet MS', sans-serif; font-weight: 700; color: #053779; margin-top: 4px; }
.wwjm-hint { font-family: 'Trebuchet MS', sans-serif; font-size: 11px; color: #94a3b8; margin-top: 4px; }

/* ---------- Reward panel ---------- */
.wwjm-returning-tag {
  font-family: 'Trebuchet MS', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; margin-bottom: 6px;
}
.wwjm-reward-icon {
  font-size: 54px; margin-bottom: 6px;
  animation: wwjm-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes wwjm-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.wwjm-reward-sub {
  font-family: 'Trebuchet MS', sans-serif; font-size: 1.05rem;
  color: #0d1f3c; font-weight: 700; margin-bottom: 20px;
}

.wwjm-coupon-box {
  background: #f8fafc; border: 1.5px dashed #053779; border-radius: 16px;
  padding: 16px; margin-bottom: 16px;
}
.wwjm-coupon-label {
  display: block; font-family: 'Trebuchet MS', sans-serif; font-size: 11px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #64748b; margin-bottom: 8px;
}
.wwjm-coupon-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.wwjm-coupon-code {
  font-family: 'Courier New', monospace; font-size: 1.3rem; font-weight: 800;
  letter-spacing: .06em; color: #053779; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 14px;
}
.wwjm-copy-btn {
  background: #053779; color: #fed001; border: none; border-radius: 10px;
  padding: 10px 16px; font-family: 'Trebuchet MS', sans-serif; font-weight: 700;
  font-size: 12.5px; letter-spacing: .04em; cursor: pointer; min-height: 44px;
  transition: background .2s, transform .15s;
}
.wwjm-copy-btn:hover { background: #0a4fa8; }
.wwjm-copy-btn:focus-visible { outline: 2px solid #053779; outline-offset: 2px; }
.wwjm-copy-btn.wwjm-copied { background: #12b87a; color: #fff; }

.wwjm-reward-note {
  font-family: 'Trebuchet MS', sans-serif; font-size: .85rem;
  color: #64748b; margin-bottom: 18px;
}

.wwjm-book-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 54px; background: #fed001; color: #053779;
  font-family: 'Trebuchet MS', sans-serif; font-weight: 800; font-size: 15px;
  letter-spacing: .03em; border-radius: 14px; text-decoration: none;
  transition: transform .15s, box-shadow .2s;
}
.wwjm-book-btn:hover, .wwjm-book-btn:focus-visible {
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(254,208,1,.4);
  color: #053779; text-decoration: none;
}
.wwjm-book-btn:focus-visible { outline: 2px solid #053779; outline-offset: 3px; }

/* Only shown for coupon-bearing rewards — hidden entirely for the
   0% outcome (see wwjm-fineprint JS toggle), fixing the "Apply
   Coupon" text incorrectly appearing on a no-win result */
.wwjm-fineprint { font-family: 'Trebuchet MS', sans-serif; font-size: 10.5px; color: #b0b8c4; margin-top: 12px; }

/* Confetti, spawned by JS */
.wwjm-confetti { position: absolute; inset: -20px 0 auto 0; height: 0; overflow: visible; pointer-events: none; }
.wwjm-confetti-piece {
  position: absolute; top: -10px; width: 8px; height: 14px; opacity: .9;
  animation: wwjm-confetti-fall 1.8s ease-in forwards;
}
@keyframes wwjm-confetti-fall {
  to { transform: translateY(220px) rotate(360deg); opacity: 0; }
}

/* ---------- Mobile full-screen takeover ---------- */
@media (max-width: 575px) {
  .wwjm-overlay { padding: 0; }
  .wwjm-card {
    max-width: 100%;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: max(env(safe-area-inset-top), 20px) 20px calc(max(env(safe-area-inset-bottom), 20px) + 8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
  }
  .wwjm-close, .wwjm-sound-toggle { top: calc(max(env(safe-area-inset-top), 10px) + 6px); }
  .wwjm-stage { height: 220px; }
  .wwjm-decor { font-size: 60px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .wwjm-matki, .wwjm-teaser-matki, .wwjm-teaser-matki-glow, .wwjm-teaser-matki-spark { animation: none !important; }
  .wwjm-matki.wwjm-shake-1 .wwjm-matki-body,
  .wwjm-matki.wwjm-shake-2 .wwjm-matki-body,
  .wwjm-matki.wwjm-shake-3 .wwjm-matki-body { animation: none !important; }
  .wwjm-impact-ring.wwjm-ping { animation: none !important; opacity: 0 !important; }
  .wwjm-shard, .wwjm-drop, .wwjm-confetti-piece { animation-duration: .01s !important; }
  .wwjm-card, .wwjm-teaser { transition: none !important; animation: none !important; }
}