/* ================================================================
   CPX — Premium Prediction Cards  |  Light Mode  |  Full Width
   ================================================================ */
.cpx-wrap{
  --red:#e11d48;--blue:#1d4ed8;--gold:#d97706;--green:#16a34a;
  --purple:#7c3aed;--teal:#0891b2;
  --tx:#0f172a;--tx2:#1e293b;--mut:#64748b;
  --line:#e2e8f0;--bg:#f1f5f9;--card:#fff;--card2:#f8fafc;
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--tx);width:100%;max-width:100%;
  margin:0;padding:0 0 8px;box-sizing:border-box;
  background:var(--bg);
}
.cpx-wrap *{box-sizing:border-box;}
.cpx-empty{
  text-align:center;padding:48px 20px;color:var(--mut);
  font-size:14px;background:var(--card);
  border-left:4px solid var(--red);
}

/* ================================================================
   CARD — full width, strong shadow, slight radius
   ================================================================ */
.cpx-item{
  position:relative;background:var(--card);
  border-radius:12px;margin-bottom:10px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.06);
  border:1px solid var(--line);
}

/* ================================================================
   COMPACT HEADER — hero matchup strip
   ================================================================ */
.cpx-mini{
  position:relative;z-index:2;width:100%;
  display:flex;align-items:stretch;
  padding:0;margin:0;background:transparent;
  border:none;cursor:pointer;color:inherit;
  -webkit-tap-highlight-color:transparent;
  -webkit-appearance:none;appearance:none;outline:none;
}
.cpx-mini:focus,.cpx-mini:active,.cpx-mini:hover{background:transparent !important;outline:none !important;}

/* Hero gradient banner behind the whole header */
.cpx-deco{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(135deg,#fef2f2 0%,#fff 45%,#eff6ff 100%);
}

/* Featured badge */
.cpx-feat{
  position:absolute;top:0;left:0;z-index:6;
  font-size:9px;font-weight:900;letter-spacing:.9px;color:#fff;
  background:linear-gradient(90deg,var(--red),#be123c);
  padding:5px 14px 5px 12px;
  clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
  text-transform:uppercase;
}

/* Team side */
.cpx-side{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:7px;padding:20px 10px 16px;
  position:relative;z-index:2;min-width:0;
}

.cpx-logo{
  width:58px;height:58px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#fff;
  border:3px solid var(--line);
  box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.cpx-logo img{width:100%;height:100%;object-fit:cover;}
.cpx-logo-txt{
  font-size:15px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#334155,#0f172a);
  border-color:#334155;
}
.cpx-code{
  font-size:19px;font-weight:900;color:var(--tx);
  letter-spacing:.5px;line-height:1;
}
.cpx-full{
  font-size:10.5px;color:var(--mut);font-weight:600;
  max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Center matchup column */
.cpx-center{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;
  padding:14px 8px;min-width:100px;
  position:relative;z-index:2;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
}

.cpx-winpill{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--purple),#6d28d9);
  padding:5px 12px;border-radius:20px;
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  box-shadow:0 4px 12px rgba(124,58,237,.3);
  text-transform:uppercase;letter-spacing:.3px;
}

.cpx-vs{
  font-size:20px;font-weight:900;color:var(--tx2);
  letter-spacing:2px;line-height:1;
}
.cpx-vs-line{display:none;}

.cpx-datepill{
  display:inline-flex;align-items:center;gap:4px;
  font-size:9.5px;font-weight:700;color:var(--mut);
  background:var(--card2);border:1px solid var(--line);
  padding:4px 9px;border-radius:20px;white-space:nowrap;
}

/* Chevron */
.cpx-chev{
  display:flex;align-items:center;justify-content:center;
  align-self:stretch;width:38px;flex:0 0 38px;
  font-size:22px;font-weight:900;
  color:var(--mut);background:var(--card2);
  border-left:1px solid var(--line);
  transition:all .2s ease;
}
.cpx-item.open .cpx-chev{
  background:var(--red);color:#fff;
  border-color:var(--red);transform:rotate(90deg);
}

/* ================================================================
   EXPANDABLE DETAIL
   ================================================================ */
.cpx-detail{display:none;}
.cpx-item.open .cpx-detail{display:block;animation:cpxf .25s ease;}
@keyframes cpxf{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

/* Match meta bar */
.cpx-meta{
  font-size:10px;color:var(--mut);font-weight:700;
  padding:9px 16px;background:var(--card2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  text-transform:uppercase;letter-spacing:.5px;
}

/* ================================================================
   AI WINNER SECTION — rich hero block
   ================================================================ */
.cpx-aibox{
  position:relative;overflow:hidden;
  padding:20px 18px 18px;
  background:linear-gradient(135deg,#fff5f5 0%,#fff 60%,#fdf4ff 100%);
  border-bottom:1px solid #fecdd3;
}
/* top accent line */
.cpx-aibox::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--purple),var(--teal));
}
/* big faded trophy watermark */
.cpx-aibox::after{
  content:"🏆";position:absolute;right:14px;top:10px;
  font-size:72px;opacity:.08;line-height:1;pointer-events:none;
}

.cpx-ai-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;position:relative;z-index:1;}
.cpx-ai-ic{
  font-size:10px;font-weight:900;color:#fff;letter-spacing:.5px;
  background:linear-gradient(135deg,var(--red),#be123c);
  height:28px;padding:0 10px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(225,29,72,.3);
}
.cpx-ai-t{
  font-size:11px;font-weight:900;letter-spacing:.7px;
  color:var(--red);text-transform:uppercase;
}
.cpx-trophy{display:none;} /* using ::after watermark instead */

.cpx-pw-label{
  font-size:9px;font-weight:800;color:var(--mut);
  letter-spacing:1.2px;text-transform:uppercase;
  position:relative;z-index:1;
}
.cpx-pw-name{
  font-size:26px;font-weight:900;color:var(--tx);
  line-height:1.1;margin:4px 0 16px;
  position:relative;z-index:1;
}

/* Win probability bar */
.cpx-wp-bar{
  display:flex;height:28px;border-radius:8px;overflow:hidden;
  font-size:12px;font-weight:900;
  box-shadow:0 3px 10px rgba(0,0,0,.1);
  position:relative;z-index:1;
}
.cpx-wp-a{
  background:linear-gradient(90deg,#e11d48,#f43f5e);
  display:flex;align-items:center;padding-left:12px;
  color:#fff;min-width:44px;
}
.cpx-wp-b{
  background:linear-gradient(90deg,#1d4ed8,#3b82f6);
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:12px;color:#fff;min-width:44px;
}
.cpx-wp-lbl{
  display:flex;justify-content:space-between;
  font-size:9.5px;color:var(--mut);margin-top:6px;font-weight:700;
  position:relative;z-index:1;
}

/* ================================================================
   STATS GRID
   ================================================================ */
.cpx-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:#e8eef6;
  border-top:1px solid var(--line);
}
.cpx-cell{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--card);padding:13px 14px;
  transition:background .15s ease;
}
.cpx-cell:hover{background:#fafbff;}

.cpx-ic{
  font-size:18px;width:34px;height:34px;flex:0 0 34px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:#f1f5f9;
  border:1px solid var(--line);flex-shrink:0;
}
.cpx-cell-b{min-width:0;flex:1;}
.cpx-lbl{
  font-size:8px;font-weight:800;letter-spacing:.6px;
  color:var(--mut);text-transform:uppercase;
}
.cpx-val{
  font-size:12.5px;font-weight:800;margin-top:3px;
  line-height:1.3;word-break:break-word;color:var(--tx);
}
.cpx-num{font-size:17px;color:var(--blue);font-variant-numeric:tabular-nums;}
.cpx-sub{font-size:9.5px;color:var(--purple);font-weight:700;margin-top:2px;}

.cpx-conf{
  height:5px;border-radius:4px;
  background:#e8eef6;overflow:hidden;margin-top:6px;
}
.cpx-conf-f{
  height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--red),var(--purple));
}

/* ================================================================
   AI INSIGHTS
   ================================================================ */
.cpx-insights{
  padding:14px 18px;
  background:linear-gradient(135deg,#eff6ff,#f0f9ff);
  border-top:1px solid #bfdbfe;border-bottom:1px solid #bfdbfe;
}
.cpx-ins-head{
  font-size:10px;font-weight:900;letter-spacing:.6px;
  color:var(--blue);text-transform:uppercase;margin-bottom:8px;
}
.cpx-ins-row{font-size:12px;color:var(--tx2);margin:5px 0;line-height:1.6;}
.cpx-ins-k{color:var(--blue);font-weight:800;}

/* ================================================================
   RISK TIERS
   ================================================================ */
.cpx-risks{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:1px;background:var(--line);
  border-top:1px solid var(--line);
}
.cpx-risk{padding:13px 10px;text-align:center;background:var(--card);}
.cpx-risk-h{
  display:inline-block;font-size:9px;font-weight:900;
  letter-spacing:.5px;text-transform:uppercase;
  margin-bottom:7px;padding:3px 10px;border-radius:20px;
}
.cpx-risk-b{font-size:11px;color:var(--tx2);line-height:1.5;}

.cpx-safe{background:#f0fdf4;}.cpx-safe .cpx-risk-h{color:#166534;background:#dcfce7;}
.cpx-bal{background:#eff6ff;}.cpx-bal  .cpx-risk-h{color:#1e40af;background:#dbeafe;}
.cpx-high{background:#fff1f2;}.cpx-high .cpx-risk-h{color:#9f1239;background:#ffe4e6;}

/* ================================================================
   DISCLAIMER
   ================================================================ */
.cpx-disc{
  display:flex;align-items:center;gap:10px;
  background:var(--card2);border-top:1px solid var(--line);
  padding:13px 16px;font-size:12px;color:var(--mut);
  margin-top:10px;border-radius:8px;
  border:1px solid var(--line);
}
.cpx-disc-ic{font-size:18px;}
.cpx-disc b{color:var(--tx2);font-weight:800;}

/* ================================================================
   DREAM11 SECTION — Premium Fantasy Picks
   ================================================================ */
.cpx-d11{
  position:relative;overflow:hidden;
  padding:0 0 4px;
  background:linear-gradient(160deg,#0f172a 0%,#1e1b4b 60%,#0c1445 100%);
  border-top:3px solid #7c3aed;
}
/* top shimmer accent */
.cpx-d11::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#7c3aed,#06b6d4,#f59e0b,#e11d48,#7c3aed);
  background-size:300% 100%;
  animation:cpxShimmer 4s linear infinite;
}
@keyframes cpxShimmer{0%{background-position:0 0}100%{background-position:300% 0}}

/* faded D11 watermark */
.cpx-d11::after{
  content:"D11";position:absolute;right:-10px;bottom:-16px;
  font-size:120px;font-weight:900;color:rgba(255,255,255,.04);
  line-height:1;pointer-events:none;letter-spacing:-4px;
}

/* ── Header ── */
.cpx-d11-head{
  display:flex;align-items:center;gap:10px;
  padding:16px 18px 10px;
}
.cpx-d11-logo{
  font-size:10px;font-weight:900;letter-spacing:.5px;
  color:#fff;
  background:linear-gradient(135deg,#7c3aed,#4338ca);
  padding:5px 11px;border-radius:7px;
  box-shadow:0 4px 14px rgba(124,58,237,.5);
}
.cpx-d11-title{
  font-size:14px;font-weight:900;color:#fff;
  letter-spacing:.3px;flex:1;
}
.cpx-d11-badge{
  font-size:9px;font-weight:900;color:#0f172a;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  padding:3px 9px;border-radius:20px;
  box-shadow:0 2px 8px rgba(245,158,11,.4);
}

/* ── Team Composition ── */
.cpx-d11-comp{
  display:flex;align-items:center;gap:7px;
  margin:0 18px 12px;
  padding:8px 12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  font-size:12px;font-weight:700;color:rgba(255,255,255,.85);
}
.cpx-d11-comp-ic{font-size:14px;}

/* ── Captain / VC Hero Row ── */
.cpx-d11-hero{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;padding:0 18px 14px;
}
.cpx-d11-cvc{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:16px 10px 14px;
  text-align:center;
  transition:transform .15s ease;
  overflow:hidden;
}
.cpx-d11-cvc::before{
  content:"";position:absolute;inset:0;border-radius:14px;
  opacity:0;transition:opacity .2s ease;
}
.cpx-d11-cap{border-color:rgba(251,191,36,.35);}
.cpx-d11-cap::before{background:radial-gradient(circle at 50% 0%,rgba(251,191,36,.18),transparent 70%);}
.cpx-d11-vc{border-color:rgba(99,102,241,.35);}
.cpx-d11-vc::before{background:radial-gradient(circle at 50% 0%,rgba(99,102,241,.18),transparent 70%);}
.cpx-d11-cvc:hover::before{opacity:1;}

.cpx-d11-avatar{
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:900;color:#fff;
  margin-bottom:6px;
  position:relative;z-index:1;
}
.cpx-d11-cap .cpx-d11-avatar{
  background:linear-gradient(135deg,#1e3a8a,#fbbf24 120%);
  box-shadow:0 6px 20px rgba(251,191,36,.45);
  border:3px solid rgba(251,191,36,.5);
  padding:0;overflow:hidden;
}
.cpx-d11-vc .cpx-d11-avatar{
  background:linear-gradient(135deg,#1e1b4b,#7c3aed 120%);
  box-shadow:0 6px 20px rgba(124,58,237,.45);
  border:3px solid rgba(124,58,237,.5);
  padding:0;overflow:hidden;
}
/* Cartoon avatar image inside circle */
.cpx-d11-avatar-img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  display:block;border-radius:50%;
}

/* Pill small avatar */
.cpx-d11-pill-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  overflow:hidden;
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.15);
}
.cpx-d11-pill-avatar .cpx-d11-avatar-img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  border-radius:50%;
}

.cpx-d11-cbadge{
  position:absolute;top:10px;right:10px;
  font-size:10px;font-weight:900;
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
}
.cpx-d11-cap .cpx-d11-cbadge{
  background:linear-gradient(135deg,#fbbf24,#d97706);
  color:#0f172a;box-shadow:0 3px 10px rgba(251,191,36,.5);
}
.cpx-d11-vc .cpx-d11-cbadge{
  background:linear-gradient(135deg,#7c3aed,#4338ca);
  color:#fff;box-shadow:0 3px 10px rgba(124,58,237,.5);
}

.cpx-d11-cname{
  font-size:13.5px;font-weight:900;color:#fff;
  line-height:1.2;margin-bottom:2px;position:relative;z-index:1;
}
.cpx-d11-cteam{
  font-size:10px;color:rgba(255,255,255,.55);font-weight:600;
  margin-bottom:4px;position:relative;z-index:1;
}
.cpx-d11-role{
  font-size:9px;font-weight:800;
  padding:2px 8px;border-radius:10px;margin-bottom:5px;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);
  position:relative;z-index:1;
}
.cpx-d11-creason{
  font-size:10.5px;color:rgba(255,255,255,.6);
  line-height:1.4;position:relative;z-index:1;
}

/* ── Section subtitle ── */
.cpx-d11-sec-t{
  font-size:10px;font-weight:900;letter-spacing:.7px;
  color:rgba(255,255,255,.5);text-transform:uppercase;
  padding:0 18px 8px;
}

/* ── Must Pick Pills ── */
.cpx-d11-must{
  display:flex;flex-direction:column;gap:7px;
  padding:0 18px 14px;
}
.cpx-d11-pill{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:10px 13px;
  transition:background .15s ease;
}
.cpx-d11-pill:hover{background:rgba(255,255,255,.1);}
.cpx-d11-pill-name{
  flex:1;font-size:13px;font-weight:800;color:#fff;
}
.cpx-d11-pill-team{
  font-size:10.5px;color:rgba(255,255,255,.45);font-weight:600;
}

/* Role colour chips */
.cpx-d11-pill-role{
  font-size:9px;font-weight:900;letter-spacing:.4px;
  padding:3px 8px;border-radius:6px;flex-shrink:0;
}
.role-bat,.role-batsman  {background:#dc2626;color:#fff;}
.role-bwl,.role-bowler   {background:#0891b2;color:#fff;}
.role-ar,.role-allrounder{background:#16a34a;color:#fff;}
.role-wk,.role-wicketkeeper,.role-wicket{background:#d97706;color:#fff;}
.cpx-d11-pill-role:not([class*="role-"]){background:rgba(255,255,255,.15);color:#fff;}

/* ── Differential + Avoid ── */
.cpx-d11-extras{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;padding:0 18px 16px;
}
.cpx-d11-extra{
  display:flex;gap:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px;padding:12px 13px;
}
.cpx-d11-diff{border-color:rgba(34,197,94,.25);}
.cpx-d11-avoid{border-color:rgba(239,68,68,.25);}
.cpx-d11-extra-ic{font-size:18px;flex-shrink:0;line-height:1;padding-top:1px;}
.cpx-d11-extra-b{min-width:0;}
.cpx-d11-extra-label{
  font-size:8.5px;font-weight:900;letter-spacing:.5px;
  text-transform:uppercase;color:rgba(255,255,255,.45);
  margin-bottom:4px;
}
.cpx-d11-extra-name{
  font-size:12.5px;font-weight:900;color:#fff;
  margin-bottom:3px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;
}
.cpx-d11-extra-reason{
  font-size:10.5px;color:rgba(255,255,255,.55);line-height:1.4;
}

/* ── Bottom disclaimer ── */
.cpx-d11-disc{
  font-size:10.5px;color:rgba(255,255,255,.35);
  text-align:center;padding:8px 18px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:2px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:480px){
  .cpx-logo{width:50px;height:50px;}
  .cpx-code{font-size:16px;}
  .cpx-full{max-width:80px;}
  .cpx-center{min-width:88px;padding:12px 6px;}
  .cpx-pw-name{font-size:22px;}
  .cpx-aibox{padding:16px 14px 14px;}
  .cpx-grid{grid-template-columns:1fr 1fr;}
  .cpx-d11-hero{grid-template-columns:1fr 1fr;gap:8px;}
  .cpx-d11-hero{padding:0 12px 12px;}
  .cpx-d11-head{padding:14px 12px 8px;}
  .cpx-d11-must,.cpx-d11-extras,.cpx-d11-sec-t,.cpx-d11-comp{padding-left:12px;padding-right:12px;}
  .cpx-d11-extras{grid-template-columns:1fr;}
  .cpx-d11-avatar{width:46px;height:46px;font-size:15px;}
}