/* Green NerdSip box for blog posts: text, an iPhone with real feed cards fading
   one into the next (pure CSS), and gold store buttons. Same look as the
   in-article phone ad (/ns-phone-ad.js). Give the box the class "ns-pa" too:
   that phone-ad script skips any page that already has one, so a reader never
   sees two NerdSip boxes. ".ns-promo.compact" is the smaller in-game version
   that /blog/trivia-play.js inserts. */
.ns-promo{margin:2rem 0 2.25rem;padding:1.6rem 1.35rem 1.4rem;border-radius:24px;background:radial-gradient(120% 90% at 50% 0%,#24502F 0%,#1B3A25 55%,#142C1C 100%);color:#F3EFE4;position:relative;overflow:hidden;display:grid;grid-template-areas:"text" "phone" "cta";gap:1.25rem;justify-items:center}
.ns-promo::before{content:"";position:absolute;inset:0;background:radial-gradient(45% 32% at 50% 55%,rgba(243,207,114,.16),transparent 70%);pointer-events:none}
.ns-promo .np-text{grid-area:text;position:relative;max-width:34rem}
.ns-promo .np-kicker{margin:0 0 .55rem!important;font-size:.75rem!important;letter-spacing:.08em;text-transform:uppercase;font-weight:650;color:#F3CF72!important}
.ns-promo .np-lead{margin:0 0 .75rem!important;font-family:"Playfair Display",Georgia,serif;font-size:1.3rem!important;line-height:1.3!important;font-weight:700;color:#fff!important;text-wrap:balance}
.ns-promo p{color:rgba(243,239,228,.9)!important;font-size:1rem;line-height:1.6;margin:0 0 .7rem}
.ns-promo ul.np-points{list-style:none;margin:.2rem 0 .4rem!important;padding:0!important}
.ns-promo ul.np-points li{position:relative;padding-left:1.5rem;margin:0 0 .45rem;color:rgba(243,239,228,.92)!important;line-height:1.5}
.ns-promo ul.np-points li::before{content:"✓";position:absolute;left:0;top:0;color:#F3CF72;font-weight:800}
.ns-promo .np-phone{grid-area:phone;position:relative;width:190px;aspect-ratio:1022/2082}
.ns-promo .np-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 28px 48px rgba(0,0,0,.45));z-index:1;pointer-events:none;margin:0!important;max-width:none!important;border-radius:0!important;box-shadow:none!important}
.ns-promo .np-screen{position:absolute;z-index:2;left:5.088%;top:2.209%;width:89.824%;height:95.581%;border-radius:13.725%/6.332%;overflow:hidden;background:#FAF8F2}
.ns-promo .np-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0!important;border-radius:0!important;max-width:none!important;box-shadow:none!important;opacity:0;animation:npFade 16s infinite}
.ns-promo .np-screen img:nth-child(1){opacity:1;animation-delay:0s}
.ns-promo .np-screen img:nth-child(2){animation-delay:4s}
.ns-promo .np-screen img:nth-child(3){animation-delay:8s}
.ns-promo .np-screen img:nth-child(4){animation-delay:12s}
@keyframes npFade{0%{opacity:0}4%{opacity:1}29%{opacity:1}33%{opacity:0}100%{opacity:0}}
.ns-promo .np-cta{grid-area:cta;position:relative;text-align:center}
.ns-promo .np-btns{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.ns-promo a.np-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.7rem 1.4rem;border-radius:14px;background:#F3CF72;color:#142C1C!important;font-weight:700;text-decoration:none!important;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.ns-promo a.np-btn.alt{background:rgba(255,255,255,.1);color:#fff!important;box-shadow:none;border:1px solid rgba(243,239,228,.35)}
.ns-promo .np-small{margin:.7rem 0 0!important;font-size:.85rem!important;color:rgba(243,239,228,.75)!important}
@media (min-width:760px){
  .ns-promo{grid-template-areas:"text phone" "cta phone";grid-template-columns:1fr 210px;column-gap:2.25rem;padding:2rem 2.25rem;justify-items:start;align-items:center}
  .ns-promo .np-phone{width:210px}
  .ns-promo .np-cta{text-align:left}
  .ns-promo .np-btns{justify-content:flex-start}
}
/* In-game version: smaller phone, sits between two questions */
.ns-promo.compact{margin:1.4rem 0 1.6rem;padding:1.25rem 1.2rem 1.15rem;gap:1rem}
.ns-promo.compact .np-lead{font-size:1.15rem!important}
.ns-promo.compact .np-phone{width:130px}
@media (min-width:760px){
  .ns-promo.compact{grid-template-columns:1fr 140px;padding:1.4rem 1.6rem}
  .ns-promo.compact .np-phone{width:140px}
}
@media (prefers-reduced-motion:reduce){.ns-promo .np-screen img{animation:none}}
@media print{.ns-promo{display:none!important}}