/* ===========================================================
   Kohli Paglu Club — motion & playful details layer
   Palette, fonts and copy unchanged. Festive accents added.
   =========================================================== */
:root{
  --marigold:#F2850D; --marigold2:#FFB22E; --terra:#B4552B; --terra2:#8C3C1C;
  --leaf:#3E7A3A; --kalava:#D5202C;
}

/* ---------- 1. headline ticker under the nav ---------- */
.hticker-clip{overflow:hidden;position:relative;z-index:4}
.hticker{background:var(--cream);color:var(--ink);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(-1deg) scale(1.03);overflow:hidden;position:relative;z-index:4;margin:10px 0 -6px;user-select:none}
.ht-track{display:flex;width:max-content;animation:htRun 46s linear infinite}
.ht-track span{font-family:Anton,Impact,sans-serif;font-size:15px;letter-spacing:2.2px;text-transform:uppercase;
  padding:7px 0;white-space:nowrap;display:flex;align-items:center}
.ht-track span i{font-style:normal;color:var(--pink);margin:0 18px;font-size:13px}
@keyframes htRun{to{transform:translateX(-50%)}}
.hticker:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--cream),transparent 8%,transparent 92%,var(--cream))}
@media (max-width:640px){.ht-track span{font-size:13px;letter-spacing:1.6px}}

/* ---------- 2. hero stage ---------- */
.hero h1 .mask{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln{display:block}
.hero h1 .p span.cur{display:inline-block;animation:load 1.6s steps(1) infinite}

.hs{position:relative;max-width:460px;width:100%;margin:0 auto;padding:26px 0 10px}
.hs-back{position:absolute;inset:-26px -34px;pointer-events:none;z-index:0}
.hs-18{position:absolute;left:46%;top:14%;transform:translate(-50%,-50%);font-family:Anton,Impact,sans-serif;
  font-size:300px;line-height:.8;color:transparent;-webkit-text-stroke:3px var(--gold);opacity:.3;letter-spacing:-8px}
.hs-star{position:absolute;color:var(--cream);width:24px;animation:twinkle 2.6s ease-in-out infinite}
.hs-star.s2{animation-delay:.9s;color:var(--gold);width:18px}
.hs-star.s3{animation-delay:1.7s;width:14px}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:.95}50%{transform:scale(.45) rotate(45deg);opacity:.35}}
.hs-badge{position:absolute;right:-52px;bottom:112px;width:124px;height:124px;z-index:6;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hs-badge text{font:700 10.4px "Space Grotesk",sans-serif;letter-spacing:2.1px;fill:var(--cream);text-transform:uppercase}
.hs-badge circle{fill:rgba(18,16,22,.9);stroke:var(--pink);stroke-width:2}
.hs-doodle{position:absolute;left:-8px;top:-14px;width:124px;color:var(--pink);z-index:4;overflow:visible}
.tapedph{position:absolute;width:104px;background:var(--cream);padding:7px 7px 18px;border:2px solid var(--ink);
  box-shadow:5px 5px 0 rgba(0,0,0,.45);z-index:1}
.tapedph img{filter:grayscale(1) contrast(1.08);aspect-ratio:1;object-fit:cover;border:1.5px solid var(--ink)}
.tapedph:before{content:"";position:absolute;top:-10px;left:50%;width:54px;height:18px;margin-left:-27px;
  background:rgba(242,237,228,.6);border:1px solid rgba(18,16,22,.3);transform:rotate(-5deg)}
.tapedph.l{left:-46px;top:16%;transform:rotate(-10deg)}
.tapedph.r{right:-44px;top:58%;transform:rotate(9deg)}
.hs-front{position:relative;z-index:3}
.hs-wobble{transform-origin:50% 0}
.polaroid .sign{position:absolute;left:8px;right:8px;bottom:8px;height:62px;color:var(--pink2);overflow:visible;pointer-events:none}
.polaroid .sign path{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.hs-heart{position:absolute;pointer-events:none;z-index:5}
@media (max-width:980px){
  .hs-18{font-size:210px}
  .tapedph{width:78px}.tapedph.l{left:-18px}.tapedph.r{right:-16px}
  .hs-badge{width:96px;height:96px;right:-6px;bottom:18px}
}
@media (max-width:480px){
  .hs{padding-top:34px}
  .hs-18{font-size:168px;-webkit-text-stroke-width:2px}
  .tapedph{width:64px;padding:5px 5px 13px}
  .tapedph.l{left:-6px;top:12%}.tapedph.r{right:-4px;top:62%}
  .hs-badge{width:84px;height:84px;right:0;bottom:6px}
  .hs-badge text{font-size:9.4px;letter-spacing:1.5px}
  .hs-doodle{width:96px;left:-2px}
}

/* ball bounce + tap stickers */
.roar-btn{animation:ballBounce 2.4s ease-in-out infinite}
@keyframes ballBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.roar-msg.cheer{font-family:"Caveat Brush",cursive;font-size:23px;color:var(--gold);line-height:1.1}
.tapstick{position:fixed;z-index:64;pointer-events:none;font-family:Anton,Impact,sans-serif;font-size:26px;
  letter-spacing:1px;background:var(--pink);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;
  padding:4px 14px;box-shadow:4px 4px 0 var(--ink);white-space:nowrap}
.tapstick.gold{background:var(--gold)} .tapstick.cream{background:var(--cream)}

/* ---------- 3. EXTRA! EXTRA! pink ticker ---------- */
.pticker{background:var(--pink);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;overflow:hidden;
  margin:0 0 26px;box-shadow:6px 6px 0 var(--ink);position:relative}
.pt-track{display:flex;width:max-content;animation:htRun 38s linear infinite}
.pt-track span{font-family:Anton,Impact,sans-serif;font-size:15px;letter-spacing:2px;text-transform:uppercase;
  padding:9px 0;white-space:nowrap;display:flex;align-items:center}
.pt-track span i{font-style:normal;margin:0 16px;color:var(--cream);font-size:13px}
@media (max-width:640px){.pt-track span{font-size:13px;letter-spacing:1.4px}}

/* ---------- 4. torn newspaper clippings ---------- */
.clips{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}
@media (max-width:900px){.clips{grid-template-columns:repeat(2,1fr);gap:16px}}
.clip{background:var(--cream);color:var(--ink);padding:20px 16px 26px;position:relative;
  clip-path:polygon(0 3%,7% 0,15% 3%,24% 0,33% 3%,42% 0,51% 3%,60% 0,69% 3%,78% 0,87% 3%,95% 0,100% 3%,
    100% 97%,93% 100%,85% 97%,76% 100%,67% 97%,58% 100%,49% 97%,40% 100%,31% 97%,22% 100%,13% 97%,5% 100%,0 97%);
  box-shadow:0 10px 24px rgba(0,0,0,.35)}
.clip:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(to bottom,transparent 0 22px,rgba(18,16,22,.13) 22px 23px)}
.clip.pink{background:var(--pink)}
.clip .mast{position:relative;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:11px;
  letter-spacing:1.4px;text-transform:uppercase;padding-bottom:7px;margin-bottom:12px;
  border-bottom:3px double var(--ink)}
.clip b{position:relative;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(44px,6.4vw,70px);
  line-height:1;display:block}
.clip h4{position:relative;margin:4px 0;font-size:17px}
.clip p{position:relative;margin:5px 0 0;font-size:13px}
.clip .script{color:var(--ink);font-size:24px;position:relative}
.clip .pin{position:absolute;top:10px;right:12px;width:12px;height:12px;border-radius:50%;background:var(--red);
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}

/* ---------- 5. 100 ki mannat card ---------- */
.mannat{position:relative;background:#120F16;border:1.5px solid var(--line);border-radius:28px;
  padding:64px 40px 40px;margin-top:56px;display:grid;grid-template-columns:230px 1fr;gap:40px;
  align-items:center;overflow:hidden}
@media (max-width:860px){.mannat{grid-template-columns:1fr;padding:58px 20px 30px;gap:22px}}
.mannat:before{content:"";position:absolute;left:50%;top:-10%;width:520px;height:320px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(242,133,13,.16),transparent 70%);pointer-events:none}
.toran{position:absolute;left:-2%;top:-6px;width:104%;height:84px;pointer-events:none;transform-origin:50% 0;
  animation:toranSway 5.5s ease-in-out infinite}
@keyframes toranSway{0%,100%{transform:rotate(-.9deg)}50%{transform:rotate(.9deg)}}
.mn-marigold{position:absolute;width:58px;pointer-events:none;opacity:.5;animation:mFloat 13s ease-in-out infinite}
.mn-marigold.m2{animation-delay:4s;animation-duration:17s;width:42px}
@keyframes mFloat{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(18px,-26px) rotate(22deg)}}
.diya-big{width:100%;max-width:220px;margin:0 auto;display:block;overflow:visible}
.diya-big .glow{animation:diyaGlow 2.8s ease-in-out infinite;transform-origin:center}
@keyframes diyaGlow{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}
.flame{transform-origin:50% 100%;animation:flicker 1.5s ease-in-out infinite}
.flame.inner{animation-duration:.9s;animation-direction:alternate}
@keyframes flicker{0%,100%{transform:scale(1) skewX(0)}30%{transform:scale(1.07,.94) skewX(4deg)}65%{transform:scale(.95,1.08) skewX(-4deg)}}
.mannat h2{font-size:clamp(40px,6vw,66px);line-height:1.03;margin:6px 0 14px}
.mannat p{max-width:640px;margin:0}
.diya-row{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 8px}
.dbtn{width:46px;height:52px;border:0;background:none;padding:0;position:relative;filter:grayscale(.55) brightness(.75);
  transition:filter .3s,transform .18s}
.dbtn:hover{transform:translateY(-4px)}
.dbtn.lit{filter:none}
.dbtn.next{animation:nextPulse 1.8s ease-in-out infinite}
.dbtn.next:before{content:"";position:absolute;left:50%;top:58%;width:44px;height:44px;margin:-22px 0 0 -22px;
  border:2px dashed var(--marigold2);border-radius:50%;opacity:.75}
@keyframes nextPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.dbtn svg{width:100%;height:100%;overflow:visible}
.dbtn .fl{opacity:0;transform-origin:50% 100%}
.dbtn.lit .fl{opacity:1;animation:flicker 1.3s ease-in-out infinite}
.mn-help{color:var(--muted);font-size:13.5px;margin:4px 0 20px!important}
.mn-line{display:block;min-height:30px;margin:16px 0 0;color:var(--gold);font-size:25px}
.ton-fill.orange{background:repeating-linear-gradient(-45deg,var(--marigold) 0 12px,var(--marigold2) 12px 24px)}
.ton-ball{position:absolute;top:-16px;left:0;width:34px;height:34px;transform:translateX(-50%);
  transition:left 1.5s cubic-bezier(.2,1,.3,1)}
.ton-ball svg{animation:ballRoll 2.6s linear infinite}
@keyframes ballRoll{to{transform:rotate(360deg)}}
.petal{position:fixed;z-index:63;pointer-events:none;width:16px;height:16px;border-radius:50% 50% 50% 0;
  background:var(--marigold2);box-shadow:inset -3px -3px 0 rgba(0,0,0,.18)}
.petal.o{background:var(--marigold)}

/* ---------- 6. quiz: guess the player ---------- */
.gs{position:relative;width:100%;max-width:250px;margin:0 auto;display:grid;place-items:center}
.gs-bg{position:absolute;inset:-46px -8px;z-index:0;display:flex;flex-direction:column;justify-content:space-between;
  align-items:center;font-family:Anton,Impact,sans-serif;font-size:58px;line-height:.86;color:transparent;
  -webkit-text-stroke:2.4px var(--gold);opacity:.45;pointer-events:none;letter-spacing:-1px}
.gs-ph{position:relative;z-index:1;background:var(--cream);padding:10px 10px 36px;border:2px solid var(--ink);
  transform:rotate(-4deg);box-shadow:8px 8px 0 var(--pink);width:100%;overflow:hidden}
.gs-ph img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 22%;border:2px solid var(--ink);
  filter:blur(14px) saturate(.55);transition:filter 1.1s ease}
.gs-ph.open img{filter:blur(0) saturate(1)}
.gs-ph .tapestrip{position:absolute;top:-12px;left:-18px;width:96px;height:26px;background:var(--gold);
  border:2px solid var(--ink);transform:rotate(-16deg);z-index:3}
.gs-ph figcaption{font-family:"Caveat Brush",cursive;color:var(--ink);font-size:21px;text-align:center;
  position:absolute;left:0;right:0;bottom:7px}
.gs-scan{position:absolute;left:0;right:0;height:5px;top:0;z-index:2;
  background:linear-gradient(90deg,transparent,var(--pink),transparent);box-shadow:0 0 16px var(--pink);
  animation:scan 2.4s ease-in-out infinite}
@keyframes scan{0%,100%{top:4%}50%{top:76%}}
.gs-ph.open .gs-scan{display:none}
.gs-tag{position:absolute;right:-14px;top:-16px;z-index:4;background:var(--pink);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:999px;padding:5px 12px;font-weight:700;font-size:11.5px;
  letter-spacing:1.2px;box-shadow:3px 3px 0 var(--ink);animation:bob 2.4s ease-in-out infinite}
/* ---------- 6b. quiz: mystery card that flips to the real clue ---------- */
.flip{width:100%;height:100%;perspective:1100px}
.flip-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.3,1,.35,1)}
.flip-in.go{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;display:grid;place-items:center}
.face.b{transform:rotateY(180deg)}
.face.f{background:var(--cream);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--pink);
  padding:9px 9px 5px;display:flex;flex-direction:column;animation:mystWobble 3.8s ease-in-out infinite}
@keyframes mystWobble{0%,100%{transform:rotate(-5.5deg)}50%{transform:rotate(-1.5deg)}}
.face.f .tapestrip{position:absolute;top:-12px;left:-16px;width:92px;height:24px;background:var(--gold);
  border:2px solid var(--ink);transform:rotate(-16deg);z-index:3}
.myst-in{flex:1;width:100%;border:2px solid var(--ink);display:grid;place-items:center;position:relative;
  overflow:hidden;background:#E6DFD1}
.myst-in:before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(-45deg,transparent 0 12px,rgba(18,16,22,.07) 12px 24px)}
.qm{position:relative;font-family:Anton,Impact,sans-serif;font-size:94px;line-height:1;color:var(--pink);
  -webkit-text-stroke:3px var(--ink);text-shadow:5px 5px 0 rgba(18,16,22,.18)}
.face.f .cap{font-family:"Caveat Brush",cursive;color:var(--ink);font-size:20px;text-align:center;padding-top:3px}
@media (max-width:760px){.qm{font-size:60px;-webkit-text-stroke-width:2px}.face.f .cap{font-size:16px}}

.q-text .strike{position:relative;color:var(--pink)}
.q-text .strike:after{content:"";position:absolute;left:-6%;right:-6%;top:52%;height:5px;background:var(--cream);
  transform:rotate(-7deg);border-radius:3px}
.q-text .oops{font-family:"Caveat Brush",cursive;color:var(--gold);text-transform:none;font-size:.72em;
  display:inline-block;transform:rotate(-5deg);margin:0 .12em}
.q-sub{color:var(--muted);font-size:15.5px;margin:-12px 0 18px}
.opt.wrong-soft{background:#E07A86;color:var(--ink);animation:shake .45s}
.qsticker{position:absolute;right:10px;top:10px;z-index:6;width:124px;height:124px;border-radius:50%;
  background:var(--gold);color:var(--ink);border:3px solid var(--ink);display:grid;place-content:center;
  text-align:center;padding:8px;box-shadow:5px 5px 0 var(--ink);transform:rotate(-9deg)}
.qsticker b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:17px;letter-spacing:.6px;display:block}
.qsticker span{font-family:"Caveat Brush",cursive;font-size:19px;line-height:1.05;display:block;margin-top:2px}
.qsticker.oops{background:var(--cream)}
@media (max-width:760px){
  .gs{max-width:200px}
  .gs-bg{font-size:44px;inset:-34px -6px}
  .qsticker{width:96px;height:96px;right:6px;top:6px;padding:6px}
  .qsticker b{font-size:13px}.qsticker span{font-size:15px}
}
.q-hint{display:inline-block;margin-top:10px;background:var(--bg);border:1.5px dashed var(--gold);color:var(--gold);
  border-radius:999px;padding:5px 14px;font-weight:700;font-size:13.5px}

/* ---------- toran pieces built by paglu-fx.js ---------- */
.toran-str{position:absolute;left:0;top:0;width:100%;height:30px}
.toran-row{position:relative;display:flex;justify-content:space-between;align-items:flex-start;padding:0 8px}
.tmg{width:30px;flex:none;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.tmg .tleaf{width:14px;margin:-4px auto 0;display:block}
#bigFlame{transform-box:fill-box;transform-origin:50% 100%}

/* ---------- reduced motion: show the final state, hide nothing ---------- */
@media (prefers-reduced-motion:reduce){
  .ht-track,.pt-track{animation:none}
  .hs-badge,.toran,.mn-marigold,.roar-btn,.gs-scan,.dbtn.next,.flame,.diya-big .glow,.ton-ball svg{animation:none!important}
  .gs-scan{display:none}
  .gs-ph img{filter:blur(10px) saturate(.6)}
  .gs-ph.open img{filter:none}
}