/* Good Call challenge card: the live end-of-session card on the Main Stage. Sized in container units:
   the host element must have container-type: size (the .p-ad-frame does once you add it). */
/* ---------------- the card (sized in container units so it fits any ad slot) ---------------- */
.cc { position: absolute; inset: 0; overflow: hidden; font-family: "Segoe UI", Inter, Roboto, system-ui, sans-serif; color: #fff; }
.cc-bg { position: absolute; inset: 0; background: radial-gradient(90% 60% at 50% 28%, #3a1584 0%, #1a0840 55%, #08031a 100%); }
.cc-rays { position: absolute; left: 50%; top: 27%; width: 220cqh; height: 220cqh; margin: -110cqh 0 0 -110cqh; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(168,85,247,.18) 0deg 6deg, rgba(168,85,247,0) 6deg 18deg); }
.cc-top { position: absolute; left: 0; right: 0; top: 5.5cqh; text-align: center; font-weight: 800; font-size: 2.1cqh; letter-spacing: .28em; color: #d9ccff; opacity: 0; }
.cc-ring { position: absolute; left: 50%; top: 10cqh; width: 34cqh; height: 34cqh; margin-left: -17cqh; }
.cc-ring svg { width: 100%; height: 100%; overflow: visible; }
.cc-num { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.cc-num b { display: block; font-weight: 900; font-size: 12cqh; line-height: 1; font-variant-numeric: tabular-nums; }
.cc-num small { display: block; font-weight: 800; font-size: 2.4cqh; color: #d9ccff; letter-spacing: .12em; margin-top: .4cqh; }
.cc-tier { position: absolute; left: 0; right: 0; top: 46cqh; text-align: center; font-weight: 900; font-size: 3.4cqh; opacity: 0; }
.cc-streak { position: absolute; left: 50%; top: 51.5cqh; transform: translateX(-50%); padding: .7cqh 2cqh; border-radius: 999px; font-weight: 900; font-size: 2.2cqh; color: #ffb323; background: rgba(255,179,35,.14); border: .3cqh solid rgba(255,179,35,.55); white-space: nowrap; opacity: 0; }
.cc-head { position: absolute; left: 6cqw; right: 6cqw; top: 46cqh; text-align: center; font-weight: 900; font-size: 4.6cqh; line-height: 1.08; text-wrap: balance; opacity: 0; text-shadow: 0 0 3cqh rgba(168,85,247,.6); }
.cc-rec { position: absolute; left: 7cqw; right: 7cqw; top: 46cqh; box-sizing: border-box; border-radius: 2.2cqh; padding: 2cqh 2.4cqh; opacity: 0;
  background: linear-gradient(180deg, rgba(43,32,89,.95), rgba(22,16,42,.95)); border: .35cqh solid rgba(168,85,247,.55); }
.cc-rec.ghost { border-style: dashed; border-color: rgba(167,155,200,.7); background: rgba(22,16,42,.7); }
.cc-rec .rh { display: flex; justify-content: space-between; align-items: center; font-weight: 900; font-size: 1.9cqh; letter-spacing: .2em; color: #d9ccff; margin-bottom: 1.2cqh; }
.cc-rec .rh span { letter-spacing: .06em; font-size: 1.8cqh; color: #ffb323; }
.cc-rec.ghost .rh span { color: #c4b8e6; }
.cc-rec .rr { display: flex; justify-content: space-between; align-items: baseline; padding: .8cqh 0; border-top: .2cqh solid rgba(168,85,247,.2); font-size: 2.4cqh; font-weight: 700; color: #e9e3f7; opacity: 0; }
.cc-rec .rr b { font-size: 3cqh; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; display: inline-block; }
.cc-rec .rr.new b { color: #ffb323; }
.cc-ways { position: absolute; left: 6cqw; right: 6cqw; top: 72cqh; display: flex; justify-content: center; gap: 1.2cqh; opacity: 0; }
.cc-ways i { font-style: normal; padding: .8cqh 1.6cqh; border-radius: 999px; font-weight: 800; font-size: 1.9cqh; color: #e9e3f7; background: rgba(255,255,255,.08); border: .2cqh solid rgba(255,255,255,.2); white-space: nowrap; }
.cc-chat { position: absolute; left: 6cqw; right: 6cqw; top: 46cqh; display: flex; flex-direction: column; gap: 1.2cqh; }
.cc-msg { display: flex; align-items: flex-end; gap: 1.2cqh; opacity: 0; }
.cc-msg.me { justify-content: flex-end; }
.cc-msg .av { flex: none; width: 4.6cqh; height: 4.6cqh; border-radius: 50%; display: grid; place-items: center; font-size: 2.8cqh; line-height: 1; }
.cc-bub { max-width: 78%; padding: 1.2cqh 1.7cqh; border-radius: 2.4cqh; font-size: 2.3cqh; font-weight: 600; line-height: 1.25; background: #2b2059; border-bottom-left-radius: .6cqh; }
.cc-msg.me .cc-bub { background: linear-gradient(180deg, #8b4cf4, #7c3aed); border-bottom-left-radius: 2.4cqh; border-bottom-right-radius: .6cqh; }
.cc-ticket { position: absolute; left: 9cqw; right: 9cqw; top: 54cqh; border-radius: 2cqh; padding: 2.2cqh 2.4cqh; box-sizing: border-box; text-align: center; opacity: 0;
  background: linear-gradient(160deg, #ffcf5a, #ffb323 55%, #f29a00); color: #2b1300; box-shadow: 0 2cqh 5cqh rgba(0,0,0,.5);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 1.6cqh, #000 1.65cqh) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 1.6cqh, #000 1.65cqh) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 1.6cqh, #000 1.65cqh) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 1.6cqh, #000 1.65cqh) right / 51% 100% no-repeat; }
.cc-ticket .k { font-weight: 900; font-size: 1.9cqh; letter-spacing: .3em; }
.cc-ticket .v { font-weight: 900; font-size: 4.6cqh; line-height: 1.05; margin: .6cqh 0; }
.cc-ticket .s { font-weight: 800; font-size: 2.1cqh; }
.cc-arrow { position: absolute; left: 50%; top: 80cqh; width: 0; height: 0; margin-left: -2cqh; border-left: 2cqh solid transparent; border-right: 2cqh solid transparent; border-top: 2.4cqh solid #ffb323; opacity: 0; }
.cc-halo { position: absolute; left: 50%; bottom: 3.5cqh; width: 60cqw; height: 9cqh; margin-left: -30cqw; border-radius: 999px; background: radial-gradient(closest-side, rgba(255,179,35,.55), rgba(255,179,35,0)); opacity: 0; }
.cc-conf i { position: absolute; width: 1.6cqh; height: .9cqh; border-radius: .3cqh; opacity: 0; }