/* ==========================================================================
   CTA3: the three key actions everywhere (round 3, 25 Oct 2026)
   PLAY FREE (Epic), BUY $QORPO (the sell.js sheet), OPEN PACKS (/open).
   - header: a compact group, Open packs + Buy $QORPO as quiet stickers, Play free stays the gold primary
   - drawer: the three big at the top
   - the one sticky bar (sell.js .q-bar.cta3-bar): price pill on desktop, slim icon bar on phones
   - footer: the "Play. Collect. Open." band
   Loaded by assets/header.html after popups2.css. Sticker Glow tokens from popups2.css (--pp-*).
   ========================================================================== */

/* ── header group ─────────────────────────────────────────────────────── */
.top .right{gap:10px}
.cta3{display:flex;align-items:center;gap:8px}
.cta3__open{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 13px 0 10px;border-radius:14px;
  border:2px solid rgba(254,214,84,.55);background:rgba(255,255,255,.06);color:var(--sg-cream,#FFF4D6)!important;
  font:800 14px var(--pp-body);white-space:nowrap;text-decoration:none;transition:transform .25s var(--pp-spring),background .15s,border-color .15s}
.cta3__open img{width:15px;height:24px;object-fit:contain;transform:rotate(-8deg);filter:drop-shadow(1px 2px 0 #000);transition:transform .3s var(--pp-spring)}
.cta3__open:hover,.cta3__open:focus-visible{background:var(--pp-paper);color:var(--pp-ink)!important;border-color:var(--pp-ink);transform:translateY(-2px) rotate(-1deg)}
.cta3__open:hover img{transform:rotate(6deg) scale(1.15)}
.cta3__open[aria-current="page"]{background:var(--pp-paper);color:var(--pp-ink)!important;border-color:var(--pp-paper)}
.top .cta3__buy{height:42px;white-space:nowrap;transition:transform .25s var(--pp-spring),background .15s}
.top .cta3__buy:hover,.top .cta3__buy:focus-visible{background:var(--pp-paper)!important;color:var(--pp-ink)!important;border-color:var(--pp-ink)!important;transform:translateY(-2px) rotate(1deg)}
.top .cta3__buy:hover small{color:var(--pp-dim)}
.top .epic{flex:0 0 auto}
@media (max-width:1480px){.top .cta3__buy small{display:none}}
.cta3__s{display:none}
@media (max-width:1260px) and (min-width:1101px){.cta3 .cta3__l{display:none}.cta3 .cta3__s{display:inline}.cta3__open{padding:0 11px 0 9px}.top .cta3__buy{padding:0 11px}}
/* 901 to 1100: the nav folds into the menu so the three actions keep their full labels */
@media (max-width:1100px) and (min-width:901px){.top .mainnav{display:none!important}.top .burger{display:block!important}.top .right{margin-left:auto}}
/* phones and tablets: the header keeps Play free only, the other two live in the drawer and the bottom bar */
@media (max-width:900px){.top .cta3{display:none}}

/* ── drawer: the three big at the top ─────────────────────────────────── */
.cta3-dr{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 0 16px}
html body .cta3-dr__play{grid-column:1/-1;width:100%;height:60px;font-size:20px;gap:10px;justify-content:center}
.cta3-dr__tile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:9px;min-height:66px;padding:10px 10px;
  border-radius:var(--pp-r-tile);background:#fff;border:3px solid var(--pp-ink);box-shadow:3px 4px 0 var(--pp-ink);color:var(--pp-ink)!important;
  text-align:left;cursor:pointer;font-family:var(--pp-body);text-decoration:none}
.cta3-dr__tile img{grid-row:1/3;width:auto;height:32px;filter:drop-shadow(2px 2px 0 var(--pp-ink))}
.cta3-dr__tile b{font:400 clamp(15px,4.4vw,18px)/1 var(--pp-disp);white-space:nowrap;text-transform:uppercase;letter-spacing:.01em}
.cta3-dr__tile small{font:700 11.5px/1.2 var(--pp-body);color:var(--pp-dim);margin-top:3px}
button.cta3-dr__tile{background:linear-gradient(180deg,#f3e9ff,#e0cbff)}
.cta3-dr__tile:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--pp-ink)}
@media (max-width:340px){.cta3-dr{grid-template-columns:1fr}}

/* ── the one sticky bar ───────────────────────────────────────────────── */
html.mb-lock .q-bar,html.mb2-lock .q-bar{visibility:hidden}
.cta3-bar__tiles{display:none}
html body .q-bar__acts .q-bar__epic{display:inline-flex}
@media (max-width:900px){
  html body .q-bar.cta3-bar{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));width:auto;max-width:none;transform:translateY(calc(100% + 24px));
    transition:transform .38s var(--pp-spring)}
  html body .q-bar.cta3-bar.on{transform:none}
  html body .q-bar.cta3-bar.pp-tuck,html.q-promo-on body .q-bar.cta3-bar,html.drawer-open body .q-bar.cta3-bar,html.q-lock body .q-bar.cta3-bar,html.q-in-on body .q-bar.cta3-bar,html.mb-lock body .q-bar.cta3-bar,html.mb2-lock body .q-bar.cta3-bar{transform:translateY(calc(100% + 24px))!important}
  html body .cta3-bar .q-bar__in{position:relative;display:block;padding:5px;border-radius:20px;gap:0}
  html body .cta3-bar .q-bar__px,html body .cta3-bar .q-bar__burn,html body .cta3-bar .q-bar__acts{display:none!important}
  .cta3-bar__tiles{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:5px}
  .cta3-bar__t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:5px 4px 4px;border-radius:14px;
    background:var(--pp-cream);border:2px solid var(--pp-ink);color:var(--pp-ink)!important;font:400 12.5px/1 var(--pp-disp);text-transform:uppercase;letter-spacing:.02em;
    text-decoration:none;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform .2s var(--pp-spring)}
  .cta3-bar__t img{height:22px;width:auto;filter:drop-shadow(1px 2px 0 var(--pp-ink))}
  .cta3-bar__t--play{background:var(--pp-grad);box-shadow:inset 0 -3px 0 rgba(17,16,21,.14)}
  .cta3-bar__t--play img{filter:none;height:22px}
  .cta3-bar__t:active{transform:scale(.95)}
  /* the close sits on the corner like a sticker tab so it never steals a tile's width */
  html body .cta3-bar .q-bar__x{position:absolute;top:-13px;right:-4px;width:26px!important;height:26px!important;min-width:26px;font-size:15px!important;box-shadow:2px 2px 0 var(--pp-ink)!important;border-width:2px!important}
  /* page bottom stays reachable above the bar */
  html.cta3-bar-has .foot{padding-bottom:calc(34px + 78px + env(safe-area-inset-bottom))!important}
}
@media (max-width:360px){.cta3-bar__t{font-size:11px}}
@media (prefers-reduced-motion:reduce){html body .q-bar.cta3-bar{transition:none}}

/* ── footer band: Play. Collect. Open. ────────────────────────────────── */
.foot:has(>.cta3-band){padding-top:0!important}
.cta3-band{position:relative;overflow:hidden;isolation:isolate;padding:clamp(48px,6vw,80px) 0 clamp(44px,6vw,72px);margin-bottom:clamp(36px,5vw,60px);
  background:var(--pp-grad);border-bottom:4px solid var(--pp-ink);color:var(--pp-ink)}
.cta3-band__rays{position:absolute;left:50%;top:0;width:260vmax;height:260vmax;margin-left:-130vmax;margin-top:-130vmax;z-index:-1;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.3) 0 7deg,rgba(255,255,255,0) 7deg 18deg);animation:cta3Spin 60s linear infinite}
.cta3-band__in{position:relative;text-align:center}
.cta3-band__t{margin:0;font:400 clamp(40px,6.4vw,92px)/.95 XHeighting,LilitaOne,"Arial Black",Impact,sans-serif;text-transform:uppercase;color:#fff;
  -webkit-text-stroke:clamp(6px,1vw,10px) var(--pp-ink);paint-order:stroke fill;text-shadow:clamp(4px,.7vw,8px) clamp(5px,.8vw,10px) 0 var(--pp-ink);letter-spacing:.01em}
.cta3-band__t span{display:inline-block}
.cta3-band__t span:nth-child(2){color:var(--pp-y1);transform:rotate(-2deg)}
.cta3-band__t span:nth-child(3){color:#c9a6ff}
.foot .cta3-band__p{max-width:620px;margin:18px auto 0;font:700 clamp(15px,1.6vw,18px)/1.4 var(--pp-body);color:var(--pp-ink)!important;-webkit-text-stroke:0;text-shadow:none}
.cta3-band__acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px);max-width:980px;margin:clamp(26px,3.5vw,40px) auto 0}
.cta3-card{position:relative;display:grid;justify-items:center;gap:6px;padding:26px 16px 20px;border-radius:var(--pp-r);background:var(--pp-paper);color:var(--pp-ink)!important;
  border:4px solid var(--pp-ink);box-shadow:var(--pp-pop-card);font-family:var(--pp-body);text-decoration:none;cursor:pointer;
  transition:transform .3s var(--pp-spring),box-shadow .3s var(--pp-spring)}
.cta3-card:hover,.cta3-card:focus-visible{transform:translate(-3px,-5px) rotate(-1deg);box-shadow:11px 15px 0 var(--pp-ink)}
.cta3-card:active{transform:translate(3px,4px);box-shadow:3px 4px 0 var(--pp-ink)}
.cta3-card__k{position:absolute;top:-15px;left:50%;transform:translateX(-50%) rotate(-3deg);padding:5px 12px 4px;border-radius:999px;background:var(--pp-ink);color:var(--pp-y1);
  font:400 14px/1 var(--pp-disp);text-transform:uppercase;letter-spacing:.08em}
.cta3-card img{height:44px;width:auto;filter:drop-shadow(2px 3px 0 var(--pp-ink))}
.cta3-card b{font:400 clamp(20px,2.2vw,28px)/1 var(--pp-disp);text-transform:uppercase;letter-spacing:.01em}
.cta3-card small{font:700 13px/1.3 var(--pp-body);color:var(--pp-dim)}
.cta3-card--play{background:linear-gradient(180deg,#FFE58A,#FED654 55%,#F8A531)}
.cta3-card--play img{filter:none}
.cta3-card--play small{color:#5a3d00}
.cta3-card--buy{background:linear-gradient(180deg,#f7f0ff,#e0cbff)}
.cta3-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%) -200% 0/250% 100% no-repeat;transition:background-position .7s ease}
.cta3-card:hover::after{background-position:200% 0}
.cta3-band__m{position:absolute;z-index:1;width:clamp(90px,10vw,150px);height:auto;filter:drop-shadow(5px 6px 0 var(--pp-ink));pointer-events:none}
.cta3-band__m--l{left:0;top:-30px;transform:rotate(-10deg)}
.cta3-band__m--r{right:0;top:-22px;transform:rotate(9deg)}
@keyframes cta3Spin{to{transform:rotate(360deg)}}
@media (max-width:760px){
  .cta3-band__acts{grid-template-columns:1fr;gap:20px;max-width:420px}
  .cta3-card{grid-template-columns:auto 1fr;grid-template-rows:auto auto;justify-items:start;text-align:left;column-gap:14px;padding:18px 16px 16px}
  .cta3-card img{grid-row:1/3;align-self:center;height:40px}
  .cta3-card__k{left:16px;transform:rotate(-3deg)}
  .cta3-band__m{width:80px;top:-28px}
  .cta3-band__m--l{left:-2px}.cta3-band__m--r{right:-2px}
  .cta3-band{padding-top:50px}
  .cta3-band__t{font-size:clamp(40px,12vw,54px);line-height:.98}
  .cta3-band__t span{display:block}
  .cta3-card{box-shadow:5px 6px 0 var(--pp-ink)}
}
@media (prefers-reduced-motion:reduce){.cta3-band__rays{animation:none}.cta3-card,.cta3-card::after{transition:none}}
html body .cta3-dr__play img,html body .cta3-card--play img,.cta3-bar__t--play img{filter:none!important}

/* ── round 3 QA ───────────────────────────────────────────────────────── */
/* desktop pill: the footer bottom stays readable above it */
@media (min-width:901px){html.cta3-bar-has .foot{padding-bottom:110px!important}}
/* a pack opening, a reveal, Open 10 or the pack room on screen (sell.js html.am-busy): the bar steps aside */
html body .q-bar{transition:transform .38s var(--pp-spring),opacity .2s,visibility .2s}
html.am-busy body .q-bar,html.am-busy body .q-promo{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
/* keyboard key chips mean nothing on a touch screen */
@media (hover:none) and (pointer:coarse){.cx-kb,.cx-foot,.sg-key.cx-kb{display:none!important}}
/* no wallet in this browser (buy.js #buyNoWallet) */
html dialog.buydlg .pp-nowallet{margin:4px 0 14px;padding:12px 14px;border-radius:14px;background:#fff0e3;border:3px solid var(--pp-ink);box-shadow:3px 4px 0 var(--pp-ink);color:var(--pp-ink)}
html dialog.buydlg .pp-nowallet b{display:block;font:400 18px/1.1 var(--pp-disp);text-transform:uppercase}
html dialog.buydlg .pp-nowallet p{margin:4px 0 10px;font:600 14px/1.4 var(--pp-body);color:var(--pp-muted)}
html dialog.buydlg .pp-nowallet__acts{display:flex;flex-wrap:wrap;gap:8px}
html dialog.buydlg .pp-nowallet__acts .btn{flex:1 1 140px;justify-content:center}
html dialog.buydlg .pp-nowallet__acts .btn{white-space:nowrap;font-size:15px}
@media (max-width:480px){html dialog.buydlg .pp-nowallet__acts .btn{flex-basis:100%}}