/* Prop Firm World Cup - frontend styles
   Built on the theme's existing CSS custom properties (--pfp-green,
   --bg-card, --r-xl, etc.) so it inherits dark/light mode and brand
   colors automatically.

   DESIGN LANGUAGE: "trading terminal meets tournament arena" - the
   site's existing dark surface + green accent is the established
   brand, so the goal here isn't a new palette, it's more premium
   *treatment* of that palette: two-tone gradients instead of flat
   fills, a "live pulse" glow that means the same thing everywhere
   it appears (this battle is happening right now), gold/silver/
   bronze podium gradients for rankings since that's literally what
   they represent, and monospace numerals throughout for the
   precision-instrument feel that already exists in the odds boxes. */

:root{
  --pfwc-grad-live: linear-gradient(135deg, #00D4A0 0%, #00E5B8 50%, #00B8D4 100%);
  --pfwc-grad-gold: linear-gradient(135deg, #F59E0B 0%, #FDE68A 50%, #F59E0B 100%);
  --pfwc-grad-silver: linear-gradient(135deg, #94A3B8 0%, #F1F5F9 50%, #94A3B8 100%);
  --pfwc-grad-bronze: linear-gradient(135deg, #B45309 0%, #F0B074 50%, #92400E 100%);
  --pfwc-grad-loss: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
}

@keyframes pfwc-pulse-glow{
  0%,100%{box-shadow:0 0 0 1px var(--pfp-green), 0 0 16px rgba(0,212,160,.25)}
  50%{box-shadow:0 0 0 1px var(--pfp-green), 0 0 28px rgba(0,212,160,.5)}
}
@keyframes pfwc-shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
/* Premium "breathing glow" for the trophy - a subtle pulse of the
   gold halo behind it, with no positional movement. Reads as a
   spotlit centerpiece rather than a bobbing icon. */
@keyframes pfwc-trophy-glow{
  0%,100%{filter:drop-shadow(0 8px 30px rgba(245,158,11,.45)) drop-shadow(0 0 40px rgba(245,158,11,.22))}
  50%{filter:drop-shadow(0 8px 34px rgba(245,158,11,.6)) drop-shadow(0 0 68px rgba(245,158,11,.4))}
}
@keyframes pfwc-rings-rotate{
  from{transform:translateX(-50%) rotate(0deg)}
  to{transform:translateX(-50%) rotate(360deg)}
}

.pfwc-eyebrow{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--pfp-green);margin-bottom:.35rem}
.pfwc-section-hdr{margin:0 0 1rem}
.pfwc-section-hdr h2{position:relative;display:inline-block}
.pfwc-store-card .badge{border:1px solid var(--pfp-green-border,rgba(0,212,160,.25));background:var(--pfp-green-bg,rgba(0,212,160,.08))!important;color:var(--pfp-green)!important}
.pfwc-section-hdr h2{margin:0;font-size:1.15rem}

.pfwc-coming-soon{text-align:center;padding:6rem 1.5rem;max-width:480px;margin:0 auto}
.pfwc-coming-soon h2{font-family:var(--font-heading);font-weight:800;margin-bottom:.75rem}
.pfwc-coming-soon p{color:var(--tx-2)}
.pfwc-preview-banner{background:var(--pfp-gold,#F59E0B);color:#07090F;text-align:center;padding:.7rem;border-radius:var(--r-md,10px);font-weight:700;margin-bottom:1.25rem}

.pfwc-prize-banner{background:var(--pfp-gold-bg,rgba(245,158,11,.08));border:1px solid rgba(245,158,11,.22);color:var(--tx-1);font-size:.85rem;border-radius:var(--r-md);padding:.7rem 1rem;margin-bottom:1rem}
.pfwc-signin-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--bg-surface);border:1px dashed var(--border-md);border-radius:var(--r-md);padding:.8rem 1rem;margin-bottom:1.25rem;font-size:.85rem;color:var(--tx-2)}

/* ================================================================
   APP SHELL - top nav bar + content below, switched with JS.
   Full page width goes to content (no sidebar eating into it), which
   matters a lot for the bracket tree having room to breathe.
   ================================================================ */
.pfwc-app-shell{
  /* Breaks out of the WordPress theme's own content-width container
     (which is what was actually limiting the available width, no
     matter how large a max-width was set here) so this gets real
     use of the browser viewport instead of whatever narrower column
     the theme wraps page content in - but always keeps at least
     ~100px clear on each side rather than running edge-to-edge. */
  width:calc(100vw - 200px);
  position:relative;left:50%;margin-left:calc(-50vw + 100px);
  max-width:1900px;
  border:1px solid var(--border);border-radius:var(--r-xl);
  background:var(--bg-surface);margin-bottom:3.5rem;
}
@media (min-width:2100px){
  /* Beyond this point the 1900px cap is what's limiting width, not
     the viewport - switch to a fixed centering offset (half the cap)
     so it stays centered instead of drifting toward the left edge. */
  .pfwc-app-shell{margin-left:-950px}
}
.pfwc-app-shell::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;border-radius:inherit;
  background-image:
    radial-gradient(ellipse 900px 400px at 15% -10%, rgba(0,212,160,.10) 0%, transparent 60%),
    radial-gradient(ellipse 700px 400px at 100% 10%, rgba(59,130,246,.08) 0%, transparent 60%),
    radial-gradient(ellipse 600px 500px at 50% 110%, rgba(245,158,11,.05) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0L56 16.6V50L28 66.6L0 50V16.6Z' fill='none' stroke='%23ffffff' stroke-opacity='0.03'/%3E%3C/svg%3E");
  background-size:auto,auto,auto,56px 100px;
}

.pfwc-app-topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  padding:.9rem 1.5rem;background:linear-gradient(180deg, var(--bg-card), var(--bg-card) 85%, var(--bg-surface));
  border-bottom:1px solid var(--border);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.pfwc-app-brand{display:flex;align-items:center;gap:.5rem;font-family:var(--font-heading);font-weight:900;font-size:1.05rem;color:var(--tx-1);flex-shrink:0}
.pfwc-trophy-mark{font-size:1.3rem;filter:drop-shadow(0 2px 6px rgba(245,158,11,.4))}

.pfwc-app-nav{display:flex;gap:.35rem;flex-wrap:wrap;flex:1;min-width:0;overflow-x:auto}
.pfwc-app-nav-btn{display:flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:100px;background:transparent;border:1px solid transparent;color:var(--tx-2);font-weight:700;font-size:.85rem;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.pfwc-app-nav-btn:hover{background:var(--bg-raised);color:var(--tx-1)}
.pfwc-app-nav-btn.active{background:var(--pfp-green-bg,rgba(0,212,160,.12));border-color:var(--pfp-green);color:var(--pfp-green);box-shadow:0 0 16px rgba(0,212,160,.18), inset 0 0 12px rgba(0,212,160,.06)}
.pfwc-live-dot{width:7px;height:7px;border-radius:50%;background:var(--pfp-green);box-shadow:0 0 0 3px var(--pfp-green-bg,rgba(0,212,160,.2));flex-shrink:0;animation:pfwc-pulse-dot 1.8s ease-in-out infinite}
@keyframes pfwc-pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}

.pfwc-app-profile-chip{display:flex;align-items:baseline;gap:.35rem;background:var(--bg-surface);border:1px solid var(--pfp-green-border,rgba(0,212,160,.25));border-radius:100px;padding:.4rem 1rem;flex-shrink:0;box-shadow:0 0 14px rgba(0,212,160,.12)}
.pfwc-app-profile-points{font-family:var(--font-mono);font-weight:900;background:var(--pfwc-grad-live);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1rem}
.pfwc-app-profile-label{font-size:.72rem;color:var(--tx-3)}
.pfwc-app-signin{flex-shrink:0}

/* This is the fix for content getting clipped: without min-width:0 a
   flex child refuses to shrink below its content's natural width, so
   a wide bracket tree would silently push past the shell's rounded
   edge instead of scrolling. */
.pfwc-app-main{position:relative;z-index:1;min-width:0;padding:1.5rem 1.75rem 2rem;border-radius:0 0 var(--r-xl) var(--r-xl)}
.pfwc-app-panel[hidden]{display:none}

@media (max-width:860px){
  /* The desktop margin formula above uses a flat 100px per side,
     which makes sense on a 1440px+ screen but eats half a phone
     screen's width on mobile - this scales it down to a small,
     comfortable gutter instead. */
  .pfwc-app-shell{
    width:calc(100vw - 24px);
    margin-left:calc(-50vw + 12px);
  }
  .pfwc-app-topbar{padding:.75rem 1rem;gap:.75rem}
  .pfwc-app-brand span:last-child{display:none}
  .pfwc-app-nav{order:3;flex-basis:100%;justify-content:flex-start}
  .pfwc-app-main{padding:1.1rem 1rem 1.5rem}
}


/* ================================================================
   TREE CARD - compact, read-only. Used only on the Bracket tab,
   which is a scannable overview of the whole tournament shape, not
   where voting happens (that's the Predict tab) - keeping this free
   of buttons/wagers is what lets the whole bracket actually fit.
   ================================================================ */
.pfwc-tc{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;transition:transform .2s}
.pfwc-tc-live{border-color:var(--pfp-green);animation:pfwc-pulse-glow 2s ease-in-out infinite}
.pfwc-tc-tbd{opacity:.5}
.pfwc-tc:hover{transform:translateY(-1px)}

.pfwc-tc-slot{display:flex;align-items:center;gap:.5rem;padding:.38rem .65rem;border-bottom:1px solid var(--border)}
.pfwc-tc-slot:last-child{border-bottom:none}
.pfwc-tc-slot-winner{background:linear-gradient(90deg, var(--pfp-green-bg,rgba(0,212,160,.1)), transparent)}
.pfwc-tc-slot-winner .pfwc-tc-name{background:var(--pfwc-grad-live);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}

/* Hexagonal avatar frames - the "hexa" motif. !important on the sizing
   here is deliberate and necessary: many WordPress themes ship a
   global `img{height:auto}` reset for responsive images, which would
   otherwise override this and let each firm's logo render at its own
   natural aspect ratio - exactly what caused logo rows and TBD rows
   to end up visibly different heights. */
.pfwc-tc-avatar{
  width:20px!important;height:20px!important;flex-shrink:0;object-fit:cover!important;display:block;
  background:var(--bg-raised);border:1px solid var(--border-md);
  border-radius:7px;
}
.pfwc-tc-avatar-fallback{display:flex;align-items:center;justify-content:center;font-size:.56rem;font-weight:900;color:var(--pfp-green);font-family:var(--font-heading)}
.pfwc-tc-slot-winner .pfwc-tc-avatar{border-color:var(--pfp-green)}
.pfwc-tc-name{flex:1;min-width:0;font-size:.98rem;font-weight:600;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfwc-tc-check{color:var(--pfp-green);font-weight:900;font-size:.78rem;flex-shrink:0}

/* ================================================================
   INLINE BRACKET VOTING - clickable firm slots + a thin gradient
   percentage bar between them showing the live split (e.g. 47%/53%).
   Voting happens right here in the bracket, not in a separate panel.
   ================================================================ */
.pfwc-tc-voting{border-color:var(--pfp-green);box-shadow:0 0 0 1px var(--pfp-green-border,rgba(0,212,160,.25)), 0 0 18px rgba(0,212,160,.12)}
.pfwc-tc-voting.pfwc-tc-voting-pending{opacity:.7;pointer-events:none}

/* A votable firm slot (a <button> spanning the row) */
.pfwc-tc-vslot{
  width:100%;display:flex;align-items:center;gap:.5rem;border:none;border-bottom:1px solid var(--border);
  background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit;
  transition:background .15s;position:relative;
}
.pfwc-tc-vslot:last-child{border-bottom:none}
button.pfwc-tc-vslot:hover{background:linear-gradient(90deg, rgba(0,212,160,.14), rgba(0,212,160,.03))}
button.pfwc-tc-vslot:hover .pfwc-tc-vote-cue{opacity:1;color:var(--pfp-green)}
.pfwc-tc-vslot .pfwc-tc-name{color:var(--tx-1);font-weight:700}
.pfwc-tc-vslot-mine{background:linear-gradient(90deg, var(--pfp-green-bg,rgba(0,212,160,.16)), transparent)}
.pfwc-tc-vslot-mine .pfwc-tc-name{color:var(--pfp-green)}
.pfwc-tc-vslot-mine .pfwc-tc-avatar{border-color:var(--pfp-green)}
.pfwc-tc-voted .pfwc-tc-vslot-other{opacity:.62}

/* The little "Vote" cue on the right of an actionable slot */
.pfwc-tc-vote-cue{
  flex-shrink:0;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tx-3);opacity:.75;transition:opacity .15s, color .15s;
  border:1px solid var(--border-md);border-radius:100px;padding:.1rem .45rem;
}
.pfwc-tc-vote-check{flex-shrink:0;color:var(--pfp-green);font-weight:900;font-size:.8rem}

/* The gradient split bar between the two firms.
   One thicker line; the fill (firm A's share) is a bright gradient,
   the track (firm B's share) a muted one, so the meeting point reads
   as "47% | 53%". Percentages sit at each end. */
.pfwc-tc-splitbar{
  position:relative;height:9px;margin:0;overflow:hidden;
  background:linear-gradient(90deg, rgba(120,130,150,.28), rgba(120,130,150,.16));
  display:flex;align-items:center;
}
.pfwc-tc-split-fill{
  position:absolute;left:0;top:0;bottom:0;
  background:var(--pfwc-grad-live);
  box-shadow:0 0 10px rgba(0,212,160,.5);transition:width .6s cubic-bezier(.4,0,.2,1);
}
.pfwc-tc-split-pct{
  position:relative;z-index:1;font-family:var(--font-mono);font-size:.58rem;font-weight:800;
  line-height:1;padding:0 .4rem;pointer-events:none;
}
.pfwc-tc-split-pct-a{color:#07321f}                 /* on the bright fill */
.pfwc-tc-split-pct-b{margin-left:auto;color:var(--tx-2)} /* on the muted track */
/* Before the user votes, keep the numbers subtle so it doesn't bias;
   after voting they pop. */
.pfwc-tc-voting:not(.pfwc-tc-voted) .pfwc-tc-split-pct{opacity:.9}


.pfwc-tc-final{width:240px!important;margin:0 auto}
.pfwc-tc-final .pfwc-tc-slot{padding:.4rem .7rem}
.pfwc-tc-final .pfwc-tc-avatar{width:30px!important;height:30px!important}
.pfwc-tc-final .pfwc-tc-name{font-size:1.12rem}

.pfwc-champion-avatar{
  width:56px!important;height:56px!important;object-fit:cover!important;flex-shrink:0;
  border:2px solid var(--pfp-gold,#F59E0B);
  border-radius:7px;
}
.pfwc-champion-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem;
  background:linear-gradient(160deg,var(--bg-card),rgba(245,158,11,.1));
  border:2px solid transparent;
  background-image:linear-gradient(160deg,var(--bg-card),rgba(245,158,11,.1)), var(--pfwc-grad-gold);
  background-origin:border-box;background-clip:padding-box, border-box;
  border-radius:var(--r-xl);padding:1.25rem 1.75rem;
  box-shadow:0 0 50px rgba(245,158,11,.22), 0 0 100px rgba(245,158,11,.08);
  margin:0 auto 1rem;max-width:300px;
  animation:pfwc-champion-glow 4s ease-in-out infinite;
}
@keyframes pfwc-champion-glow{
  0%,100%{box-shadow:0 0 50px rgba(245,158,11,.22), 0 0 100px rgba(245,158,11,.08)}
  50%{box-shadow:0 0 60px rgba(245,158,11,.35), 0 0 120px rgba(245,158,11,.15)}
}
.pfwc-champion-card::before{
  content:'';position:absolute;inset:-40%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle, rgba(245,158,11,.18) 0%, transparent 65%);
}
.pfwc-champion-label{font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;color:var(--tx-3);font-weight:700}
.pfwc-champion-name{
  font-family:var(--font-heading);font-weight:900;font-size:1.2rem;
  background:var(--pfwc-grad-gold);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:pfwc-shimmer 3s linear infinite;
}

.pfwc-top3{display:flex;justify-content:center;gap:2rem;margin:0 auto 1.5rem;font-size:.82rem;color:var(--tx-2)}
.pfwc-top3-item{display:flex;align-items:center;gap:.4rem}
.pfwc-top3-rank{
  display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  font-weight:800;font-size:.68rem;flex-shrink:0;color:#1a1a1a;
}
.pfwc-top3-item:nth-child(1) .pfwc-top3-rank{background:var(--pfwc-grad-silver);box-shadow:0 0 10px rgba(148,163,184,.5)}
.pfwc-top3-item:nth-child(2) .pfwc-top3-rank{background:var(--pfwc-grad-bronze);box-shadow:0 0 10px rgba(180,83,9,.5)}

.pfwc-third-place-wrap{margin-top:1.25rem;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.pfwc-third-place-wrap .pfwc-tree-col-label{
  background:var(--pfwc-grad-bronze);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pfwc-third-place-wrap .pfwc-tc{width:200px}
.pfwc-third-place-wrap .pfwc-tc-avatar{width:18px!important;height:18px!important}

/* ================================================================
   CONVERGING TREE - short names (see the short-name / auto-stripped
   title logic in helpers.php) plus compact cards keep this readable.
   Uses flex-wrap rather than any scroll/overflow mechanism, so it is
   structurally impossible for this to need its own scrollbar: if a
   row of columns doesn't fit, it wraps onto a new line instead,
   exactly like normal text wrapping. Worst case on a narrow screen,
   everything just stacks - still fully readable, never clipped or
   scrollable.
   ================================================================ */
.pfwc-tree-wrap{max-width:100%}
.pfwc-tree{display:flex;flex-direction:column;gap:1.5rem;position:relative}
/* The mirrored side-by-side tree only fits (and only reads correctly)
   on wide screens - it becomes the layout at >=1600px below. On
   anything narrower we use the clean flat round-by-round mobile layout
   instead of a stacked tree, because stacking the tree puts the Final
   and Third Place in the MIDDLE of the scroll (people stop there and
   miss half the matchups). So: flat layout up to 1599px, real tree at
   1600px+. */
.pfwc-tree-mobile{display:block}
.pfwc-tree{display:none!important}
@media (min-width:1600px){
  .pfwc-tree{display:flex!important}
  .pfwc-tree-mobile{display:none}
}
/* In the stacked (narrow / mobile) view the three tree parts are in
   DOM order left-side -> center -> right-side, which puts the Final and
   Third Place in the MIDDLE of the scroll - people stop there thinking
   it's the end and miss the right-side matchups. Reorder so the flow
   reads naturally: all left rounds, then all right rounds, then the
   Final/Third/Champion center last. (The desktop tree below overrides
   order back to visual left-center-right.) */
.pfwc-tree-side-left{order:1}
.pfwc-tree-side-right{order:2}
.pfwc-tree-center{order:3}

/* Mobile round-by-round bracket */
.pfwc-mob-round{margin:0 0 1.75rem}
.pfwc-mob-round-hdr{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin:0 0 .85rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);
}
.pfwc-mob-round-label{
  font-family:var(--font-heading,sans-serif);font-size:1rem;font-weight:800;color:var(--tx-1);
  letter-spacing:.01em;
}
.pfwc-mob-round-count{
  flex-shrink:0;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--pfp-green);background:var(--pfp-green-bg,rgba(0,212,160,.1));
  border:1px solid var(--pfp-green-border,rgba(0,212,160,.25));border-radius:100px;padding:.22rem .6rem;
}
.pfwc-mob-matches{display:grid;grid-template-columns:1fr;gap:.7rem}
/* On wider (but sub-1600) screens, lay the matchups of a round out in
   a responsive grid so the flat bracket uses the space well instead of
   one long thin column - still grouped clearly by round. */
@media (min-width:620px){ .pfwc-mob-matches{grid-template-columns:repeat(2,1fr);gap:.7rem 1rem} }
@media (min-width:1050px){ .pfwc-mob-matches{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1350px){ .pfwc-mob-matches{grid-template-columns:repeat(4,1fr)} }
/* Final and Third Place stay single, centered and a bit wider. */
.pfwc-mob-round-final .pfwc-mob-matches,
.pfwc-mob-round-third .pfwc-mob-matches{grid-template-columns:1fr;max-width:420px}
.pfwc-mob-round-final .pfwc-mob-round-label,
.pfwc-mob-round-third .pfwc-mob-round-label{
  background:var(--pfwc-grad-gold,linear-gradient(135deg,#F59E0B,#FBBF24));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pfwc-mob-round-final .pfwc-mob-round-hdr,
.pfwc-mob-round-third .pfwc-mob-round-hdr{border-bottom-color:rgba(245,158,11,.3)}
.pfwc-mob-round-final .pfwc-tc-final{width:100%!important}
.pfwc-tree-bg{
  position:absolute;inset:-1.5rem;z-index:0;pointer-events:none;opacity:.6;
  background-image:
    radial-gradient(circle at 20% 20%, var(--pfp-green-bg,rgba(0,212,160,.06)) 0%, transparent 45%),
    radial-gradient(circle at 80% 80%, var(--pfp-blue-bg,rgba(59,130,246,.05)) 0%, transparent 45%),
    radial-gradient(circle at 50% 45%, rgba(245,158,11,.06) 0%, transparent 35%);
}

.pfwc-tree-side{display:flex;flex-direction:column;gap:.75rem}
.pfwc-tree-col-label{
  font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-2);
  text-align:center;margin:0 auto .6rem;width:fit-content;
  padding:.25rem .7rem;border-radius:100px;
  background:linear-gradient(90deg, rgba(0,212,160,.08), rgba(59,130,246,.06));
  border:1px solid var(--pfp-green-border,rgba(0,212,160,.18));
}
.pfwc-tree-matches{display:flex;flex-direction:column;gap:.6rem}
.pfwc-tree-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 0;position:relative;z-index:1}
.pfwc-trophy{font-size:2.4rem;animation:pfwc-trophy-glow 4s ease-in-out infinite}
.pfwc-trophy-custom{
  width:200px;height:200px;object-fit:contain;
  animation:pfwc-trophy-glow 4s ease-in-out infinite;
}

@media (min-width:1600px){
  /* This breakpoint (and the sizes below) were tuned by directly
     measuring rendered widths rather than calculating by hand, after
     an earlier version of this math underestimated the real
     requirement and caused wrapping on ordinary 1440-1920px desktop
     screens. Below this width, the bracket uses the clean stacked
     single-column view (the same one mobile always uses) rather than
     a side-by-side tree that doesn't actually fit - a deliberate
     trade-off for reliability over showing the tree shape on every
     laptop size. */
  .pfwc-tree{
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:center;
    gap:1.5rem 0;padding:.5rem 0 1rem;
  }
  /* Restore visual left | center | right ordering on the desktop tree. */
  .pfwc-tree-side-left{order:1}
  .pfwc-tree-center{order:2}
  .pfwc-tree-side-right{order:3}
  .pfwc-tree-side{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;flex:1 1 auto}
  .pfwc-tree-col{display:flex;flex-direction:column;width:178px!important;flex-shrink:0;padding:0 .45rem;margin-bottom:1rem}
  .pfwc-tree-matches{justify-content:space-around;gap:.75rem;flex:1}
  .pfwc-tree-center{padding:0 1rem;min-width:178px;flex-shrink:0}
  .pfwc-trophy{font-size:2.75rem}
  .pfwc-trophy-custom{width:240px;height:240px}
}
@media (min-width:1700px){
  .pfwc-tree-col{width:200px!important;padding:0 .55rem}
  .pfwc-tree-center{padding:0 1.4rem;min-width:170px}
}

/* ================================================================
   PREDICT TAB - big firm pick buttons + bet slip. Each matchup shows
   two large clickable firm buttons (logo + name + payout) with a VS
   divider, so which firm you're choosing is unmistakable. Clicking a
   firm adds it to the slip.
   ================================================================ */
.pfwc-predict-layout{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-start}
.pfwc-predict-main{flex:1;min-width:0}
.pfwc-predict-live-note{font-size:.82rem;color:var(--tx-3);margin:-.5rem 0 1rem}
.pfwc-predict-live-note strong{color:var(--pfp-green)}

.pfwc-odds-list{display:flex;flex-direction:column;gap:.9rem}

.pfwc-pk-row{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:.9rem 1rem 1rem;
}
.pfwc-pk-meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.75rem}
.pfwc-pk-round{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--pfp-green)}
.pfwc-pk-time{font-size:.66rem;color:var(--tx-3);text-transform:uppercase;letter-spacing:.03em}
.pfwc-pk-time-live{display:inline-flex;align-items:center;gap:.4rem;color:var(--pfp-green)}
.pfwc-pk-countdown{color:var(--tx-2)}
.pfwc-pk-countdown .pfwc-cd-val{font-family:var(--font-mono);font-weight:800;color:var(--pfp-gold,#F59E0B);letter-spacing:0}
.pfwc-pk-countdown.pfwc-cd-expired .pfwc-cd-val{color:var(--pfp-green)}
.pfwc-vote-countdown{
  text-align:center;font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--tx-3);margin:0 0 .7rem;padding-bottom:.6rem;border-bottom:1px solid var(--border);
}
.pfwc-vote-countdown .pfwc-cd-val{font-family:var(--font-mono);font-weight:800;color:var(--pfp-green);letter-spacing:0}

/* The battle: two big buttons + centered VS */
.pfwc-pk-battle{display:flex;align-items:stretch;gap:0;position:relative}
.pfwc-pk-vs{
  flex-shrink:0;align-self:center;position:relative;z-index:2;margin:0 -14px;pointer-events:none;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--bg-surface);border:1px solid var(--border-md);
  font-family:var(--font-heading);font-weight:900;font-size:.72rem;color:var(--tx-2);
}
.pfwc-pk-vs span{background:var(--pfwc-grad-live);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Big firm pick button */
.pfwc-pk-btn{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:1.15rem .8rem;background:var(--bg-raised);border:2px solid var(--border-md);
  border-radius:var(--r-md);cursor:pointer;transition:transform .16s, border-color .16s, box-shadow .16s, background .16s;
  text-align:center;position:relative;
}
.pfwc-pk-btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.pfwc-pk-btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0}
button.pfwc-pk-btn:hover{
  border-color:var(--pfp-green);background:linear-gradient(180deg,var(--bg-raised),rgba(0,212,160,.06));
  box-shadow:0 0 22px rgba(0,212,160,.18);z-index:1;
}
.pfwc-pk-avatar{
  width:52px!important;height:52px!important;object-fit:cover!important;flex-shrink:0;display:block;
  background:var(--bg-card);border:1px solid var(--border-md);
  border-radius:7px;
}
.pfwc-pk-name{font-size:1rem;font-weight:800;color:var(--tx-1);line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfwc-pk-odds{display:flex;flex-direction:column;align-items:center;line-height:1}
.pfwc-pk-odds-x{font-family:var(--font-mono);font-weight:900;font-size:1.35rem;color:var(--pfp-green)}
.pfwc-pk-odds-lbl{font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-3);margin-top:.15rem}
.pfwc-pk-cta{
  margin-top:.1rem;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tx-3);transition:color .16s;
}
button.pfwc-pk-btn:hover .pfwc-pk-cta{color:var(--pfp-green)}

/* Selected (in the slip) - vivid, unmistakable */
.pfwc-pk-btn-selected,
button.pfwc-pk-btn-selected:hover{
  border-color:var(--pfp-green)!important;
  background:linear-gradient(180deg,rgba(0,212,160,.18),rgba(0,212,160,.06))!important;
  box-shadow:0 0 26px rgba(0,212,160,.3);z-index:1;
}
.pfwc-pk-btn-selected .pfwc-pk-avatar{border-color:var(--pfp-green);box-shadow:0 0 0 2px rgba(0,212,160,.35)}
.pfwc-pk-btn-selected .pfwc-pk-name{color:var(--pfp-green)}
.pfwc-pk-btn-selected .pfwc-pk-cta{display:none}
.pfwc-pk-btn-selected::after{
  content:'\2713 Selected';position:absolute;top:.5rem;right:.5rem;pointer-events:none;
  font-size:.6rem;font-weight:800;color:#07090F;background:var(--pfwc-grad-live);
  padding:.15rem .45rem;border-radius:100px;letter-spacing:.02em;
}

/* Already-picked / locked states */
.pfwc-pk-btn-picked{border-color:var(--pfp-green);background:linear-gradient(180deg,rgba(0,212,160,.14),transparent)}
.pfwc-pk-btn-picked .pfwc-pk-name{color:var(--pfp-green)}
.pfwc-pk-btn-locked{cursor:default}
.pfwc-pk-flag{font-size:.68rem;font-weight:800;color:var(--pfp-green)}
.pfwc-pk-btn-locked:not(.pfwc-pk-btn-picked){opacity:.5}

.pfwc-pk-placed{
  margin-top:.85rem;padding-top:.75rem;border-top:1px dashed var(--border);
  font-size:.78rem;color:var(--tx-2);text-align:center;
}
.pfwc-pk-placed strong{color:var(--pfp-green)}
.pfwc-pk-placed-check{color:var(--pfp-green);font-weight:900}

@media (max-width:420px){
  .pfwc-pk-avatar{width:44px!important;height:44px!important}
  .pfwc-pk-name{font-size:.9rem}
  .pfwc-pk-btn{padding:1rem .5rem}
}

/* Bet slip */
.pfwc-slip{
  width:300px;flex-shrink:0;position:sticky;top:1rem;
  background:linear-gradient(160deg,var(--bg-card),rgba(0,212,160,.04));
  border:1px solid var(--pfp-green-border,rgba(0,212,160,.2));border-radius:var(--r-lg);
  padding:1rem;box-shadow:0 0 30px rgba(0,212,160,.08);
}
.pfwc-slip-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.pfwc-slip-title{font-family:var(--font-heading);font-weight:800;font-size:1rem;color:var(--tx-1)}
.pfwc-slip-count{
  min-width:24px;height:24px;padding:0 .4rem;display:flex;align-items:center;justify-content:center;
  background:var(--pfwc-grad-live);color:#07090F;border-radius:100px;font-family:var(--font-mono);font-weight:800;font-size:.8rem;
}
.pfwc-slip-empty{font-size:.82rem;color:var(--tx-3);text-align:center;padding:1.5rem .5rem;line-height:1.5}
.pfwc-slip-items{display:flex;flex-direction:column;gap:.6rem}
.pfwc-slip-item{position:relative;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:.6rem .7rem}
.pfwc-slip-remove{position:absolute;top:.4rem;right:.5rem;background:none;border:none;color:var(--tx-3);font-size:1.1rem;line-height:1;cursor:pointer;padding:0;transition:color .15s}
.pfwc-slip-remove:hover{color:var(--pfp-red,#EF4444)}
.pfwc-slip-pick{font-weight:700;font-size:.85rem;color:var(--tx-1);padding-right:1.2rem}
.pfwc-slip-odds{font-family:var(--font-mono);color:var(--pfp-green);font-size:.78rem}
.pfwc-slip-vs{font-size:.72rem;color:var(--tx-3);margin-top:.1rem}
.pfwc-slip-stake-row{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}
.pfwc-slip-stake-input{
  width:80px;background:var(--bg-card);border:1px solid var(--border-md);color:var(--tx-1);
  border-radius:6px;padding:.3rem .5rem;font-family:var(--font-mono);font-weight:700;font-size:.85rem;
}
.pfwc-slip-stake-input:focus{outline:none;border-color:var(--pfp-green);box-shadow:0 0 0 2px rgba(0,212,160,.2)}
.pfwc-slip-win{font-family:var(--font-mono);font-size:.82rem;color:var(--pfp-green);font-weight:700}
.pfwc-slip-foot{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--border)}
.pfwc-slip-row{display:flex;justify-content:space-between;font-size:.85rem;color:var(--tx-2);margin-bottom:.4rem}
.pfwc-slip-row strong{font-family:var(--font-mono);color:var(--tx-1)}
.pfwc-slip-row-win strong{background:var(--pfwc-grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.pfwc-slip-submit{
  width:100%;margin-top:.6rem;padding:.7rem;border:none;border-radius:8px;cursor:pointer;
  background:var(--pfwc-grad-live);color:#07090F;font-weight:800;font-size:.9rem;transition:all .2s;
}
.pfwc-slip-submit:hover:not(:disabled){box-shadow:0 0 20px rgba(0,212,160,.5)}
.pfwc-slip-submit:disabled{opacity:.4;cursor:not-allowed}
.pfwc-slip-submit-over{background:var(--pfwc-grad-loss)!important}
.pfwc-slip-clear{width:100%;margin-top:.5rem;padding:.4rem;background:transparent;border:1px solid var(--border-md);border-radius:8px;color:var(--tx-3);font-size:.78rem;font-weight:700;cursor:pointer;transition:all .15s}
.pfwc-slip-clear:hover{border-color:var(--pfp-red,#EF4444);color:var(--pfp-red,#EF4444)}
.pfwc-slip-balance{text-align:center;font-size:.72rem;color:var(--tx-3);margin-top:.7rem}
.pfwc-slip-balance strong{font-family:var(--font-mono);color:var(--tx-2)}

@media (max-width:900px){
  .pfwc-predict-layout{flex-direction:column}
  /* On mobile the slip drops below the list and un-stickies so it
     doesn't cover matchups while scrolling. */
  .pfwc-slip{width:100%;position:static;order:2}
}

.pfwc-upcoming-grid{display:grid;grid-template-columns:1fr;gap:.6rem}
@media (min-width:640px){ .pfwc-upcoming-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1150px){ .pfwc-upcoming-grid{grid-template-columns:repeat(3,1fr)} }
.pfwc-upcoming-card{background:var(--bg-card);border:1px dashed var(--border-md);border-radius:var(--r-md);padding:.6rem .8rem;opacity:.7}
.pfwc-upcoming-firms{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;color:var(--tx-2)}
.pfwc-upcoming-vs{color:var(--tx-3);font-size:.68rem;font-weight:400}
.pfwc-upcoming-opens{font-size:.68rem;color:var(--tx-3);margin-top:.25rem}
/* ================================================================
   LEADERBOARD
   ================================================================ */
.pfwc-my-status{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.25rem;padding:.9rem;background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border);font-size:.85rem}
.pfwc-my-status strong{color:var(--pfp-green);font-family:var(--font-heading)}
.pfwc-mb{margin-bottom:1.25rem}
.pfwc-empty{text-align:center;color:var(--tx-3);padding:2.5rem}

/* ================================================================
   LEADERBOARD - card rows instead of a plain table, gold/silver/
   bronze gradient medals for the top 3 (content-driven: it's
   literally a podium, not decoration for its own sake).
   ================================================================ */
.pfwc-lb-list{display:flex;flex-direction:column;gap:.5rem}
.pfwc-lb-row{
  display:flex;align-items:center;gap:.9rem;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:.75rem 1.1rem;transition:all .2s;
}
.pfwc-lb-row:hover{transform:translateX(2px);border-color:var(--border-md)}
.pfwc-lb-row-top{border-width:1.5px}
.pfwc-lb-row.pfwc-lb-gold{
  background:linear-gradient(90deg, rgba(245,158,11,.1), var(--bg-card) 40%);
  border-color:rgba(245,158,11,.4);box-shadow:0 0 24px rgba(245,158,11,.12);
}
.pfwc-lb-row.pfwc-lb-silver{
  background:linear-gradient(90deg, rgba(148,163,184,.08), var(--bg-card) 40%);
  border-color:rgba(148,163,184,.35);
}
.pfwc-lb-row.pfwc-lb-bronze{
  background:linear-gradient(90deg, rgba(180,83,9,.08), var(--bg-card) 40%);
  border-color:rgba(180,83,9,.35);
}

.pfwc-lb-rank{
  flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;color:var(--tx-3);font-size:.85rem;
}
.pfwc-lb-rank.pfwc-lb-gold{
  background:var(--pfwc-grad-gold);border-radius:50%;color:#1a1a1a;font-weight:900;
  box-shadow:0 0 16px rgba(245,158,11,.5);
}
.pfwc-lb-rank.pfwc-lb-gold::before{content:'\1F947'}
.pfwc-lb-rank.pfwc-lb-silver{
  background:var(--pfwc-grad-silver);border-radius:50%;color:#1a1a1a;font-weight:900;
  box-shadow:0 0 16px rgba(148,163,184,.5);
}
.pfwc-lb-rank.pfwc-lb-silver::before{content:'\1F948'}
.pfwc-lb-rank.pfwc-lb-bronze{
  background:var(--pfwc-grad-bronze);border-radius:50%;color:#1a1a1a;font-weight:900;
  box-shadow:0 0 16px rgba(180,83,9,.5);
}
.pfwc-lb-rank.pfwc-lb-bronze::before{content:'\1F949'}

.pfwc-lb-name{flex:1;min-width:0;font-weight:700;color:var(--tx-1);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfwc-lb-row-top .pfwc-lb-name{font-size:.98rem}
.pfwc-lb-points{flex-shrink:0;font-family:var(--font-mono);font-weight:800;font-size:1rem;color:var(--tx-1)}
.pfwc-lb-row.pfwc-lb-gold .pfwc-lb-points{
  background:var(--pfwc-grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pfwc-lb-points-label{font-weight:500;font-size:.72rem;color:var(--tx-3)}

/* ================================================================
   STORE
   ================================================================ */
.pfwc-signin-notice{text-align:center;padding:1.75rem;background:var(--bg-card);border-radius:var(--r-lg);border:1px dashed var(--border-md);margin-bottom:1.5rem}
.pfwc-signin-notice p{margin-bottom:.9rem}
.pfwc-store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,260px));justify-content:start;gap:1.1rem;align-items:stretch}

/* "Foil card" treatment - a gradient border that only reveals itself
   on hover, like the edge-sheen of a premium trading/collectible
   card, fitting since these are literally prizes. */
.pfwc-store-card{
  position:relative;background:var(--bg-card);border-radius:var(--r-lg);padding:1rem;
  display:flex;flex-direction:column;gap:.4rem;max-width:260px;
  border:1px solid var(--border);transition:transform .25s, box-shadow .25s;
}
.pfwc-store-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;
  background:var(--pfwc-grad-live);opacity:0;transition:opacity .3s;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.pfwc-store-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.35), 0 0 24px rgba(0,212,160,.1)}
.pfwc-store-card:hover::before{opacity:1}

.pfwc-store-img{width:64px!important;height:64px!important;border-radius:50%;overflow:hidden;background:#fff;margin:.5rem auto .3rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:8px;box-sizing:border-box;box-shadow:0 0 0 3px var(--bg-raised), 0 4px 14px rgba(0,0,0,.3)}
.pfwc-store-img img{width:100%!important;height:100%!important;object-fit:contain!important;display:block}
.pfwc-store-name{font-size:.9rem;margin:0}
.pfwc-store-desc{font-size:.74rem;color:var(--tx-3);margin:0}
.pfwc-store-cost{
  font-family:var(--font-mono);font-weight:900;font-size:1.2rem;
  background:var(--pfwc-grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Pushes the Redeem button to the bottom of every card regardless of
   how long that card's name/description happens to be, so buttons
   line up at the same height across a row instead of floating at
   whatever point the text above them ends. */
.pfwc-store-card .btn{margin-top:auto;transition:all .2s}
.pfwc-store-card .btn.pfwc-redeem-btn:not(:disabled):hover{box-shadow:0 0 20px rgba(0,212,160,.45)}
.pfwc-redeem-msg{font-size:.76rem;text-align:center}
.pfwc-redeem-msg.success{color:var(--pfp-green)}
.pfwc-redeem-msg.error{color:var(--pfp-red,#EF4444)}

@media (max-width:480px){
  .pfwc-bk-avatar{width:22px!important;height:22px!important}
  .pfwc-bk-name{font-size:.76rem}
  .pfwc-wager-custom{width:48px}
}

/* ================================================================
   ONE-PAGER - standalone marketing/event page. Same shell width and
   design language as the app (gradients, glow, hex avatars, mono
   numerals) but laid out as a scrollable landing page rather than a
   tabbed app, since its job is building hype before launch, not
   day-to-day interaction.
   ================================================================ */
.pfwc-op{
  /* Full-bleed break-out. The CSS here handles the common case (a
     centered or full-width theme container). For themes that put
     content in a NARROWER, LEFT-aligned column, pure CSS can't
     reliably re-center to the viewport - so onepager.js measures the
     actual offset and corrects it (and re-corrects on resize). The
     CSS is the fallback if JS is disabled; the JS makes it exact. */
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  margin-top:2.5rem;margin-bottom:3.5rem;
  display:flex;flex-direction:column;align-items:center;
}
.pfwc-op > *{width:100%;max-width:1100px;margin-left:auto;margin-right:auto}
.pfwc-op > .pfwc-op-hero{padding-left:1.5rem;padding-right:1.5rem;box-sizing:border-box}

.pfwc-op-section{padding:3.5rem 1.5rem;position:relative}
.pfwc-op-center-hdr{text-align:center;margin-bottom:2.5rem}
.pfwc-op-center-hdr h2::after{left:50%;transform:translateX(-50%)}

/* Hero */
.pfwc-op-hero{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:5rem 1.5rem 4rem;overflow:hidden;
  border-radius:var(--r-xl);border:1px solid var(--border);
  background:var(--bg-surface);
}
.pfwc-op-hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(ellipse 900px 500px at 50% -5%, rgba(0,212,160,.16) 0%, transparent 62%),
    radial-gradient(ellipse 700px 500px at 12% 30%, rgba(59,130,246,.12) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at 88% 35%, rgba(245,158,11,.1) 0%, transparent 60%),
    radial-gradient(ellipse 600px 400px at 50% 108%, rgba(0,212,160,.08) 0%, transparent 60%);
}
/* Decorative concentric rings behind the trophy - adds depth and a
   sense of a "spotlight" moment for the launch centerpiece. */
.pfwc-op-hero-rings{
  position:absolute;top:-30px;left:50%;transform:translateX(-50%);z-index:0;pointer-events:none;
  width:620px;height:620px;max-width:130%;opacity:.6;
  animation:pfwc-rings-rotate 60s linear infinite;
}
.pfwc-op-hero-trophy{
  position:relative;z-index:1;display:block;flex-shrink:0;
  width:240px!important;height:240px!important;object-fit:contain!important;
  margin:0 auto 1.5rem!important;padding:0!important;
  animation:pfwc-trophy-glow 4s ease-in-out infinite;
}
.pfwc-op-hero-trophy-emoji{font-size:8rem;width:auto!important;height:auto!important;line-height:1;animation:pfwc-trophy-glow 4s ease-in-out infinite}
.pfwc-op-hero-eyebrow{
  position:relative;z-index:1;display:inline-block;margin-bottom:.5rem;
  padding:.3rem .9rem;border-radius:100px;
  background:var(--pfp-green-bg,rgba(0,212,160,.1));
  border:1px solid var(--pfp-green-border,rgba(0,212,160,.3));
  box-shadow:0 0 20px rgba(0,212,160,.15);
}
.pfwc-op-title{
  position:relative;z-index:1;font-family:var(--font-heading);font-weight:900;
  font-size:clamp(2rem,5vw,3.4rem);margin:.5rem 0;line-height:1.1;
  background:linear-gradient(180deg, var(--tx-1) 55%, rgba(255,255,255,.55));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pfwc-op-subtitle{position:relative;z-index:1;font-size:1.05rem;color:var(--tx-2);max-width:560px;margin:0 auto 2rem}

/* Countdown */
.pfwc-op-countdown{position:relative;z-index:1;display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-bottom:2rem}
.pfwc-op-cd-box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:82px;height:82px;border-radius:var(--r-lg);position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--bg-card),rgba(0,212,160,.08));
  border:1px solid var(--pfp-green-border,rgba(0,212,160,.25));
  box-shadow:0 0 20px rgba(0,212,160,.1), inset 0 1px 0 rgba(255,255,255,.04);
}
.pfwc-op-cd-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--pfwc-grad-live);opacity:.8;
}
.pfwc-op-cd-num{
  font-family:var(--font-mono);font-weight:900;font-size:1.7rem;
  background:var(--pfwc-grad-live);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pfwc-op-cd-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-3);margin-top:.15rem}
.pfwc-op-countdown-live .pfwc-op-cd-box{animation:pfwc-pulse-glow 2s ease-in-out infinite}

.pfwc-op-cta{
  position:relative;z-index:1;display:inline-block;
  background:var(--pfwc-grad-live);color:#07090F;font-weight:800;font-size:.95rem;
  padding:.85rem 2rem;border-radius:100px;text-decoration:none;
  box-shadow:0 0 30px rgba(0,212,160,.35);transition:all .25s;
}
.pfwc-op-cta:hover{box-shadow:0 0 40px rgba(0,212,160,.5);color:#07090F}

/* Reach stats */
.pfwc-op-reach-grid{display:flex;align-items:center;justify-content:center;gap:2.5rem;flex-wrap:wrap}
.pfwc-op-reach-stat{display:flex;flex-direction:column;align-items:center;gap:.2rem}
.pfwc-op-reach-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-3);font-weight:700}
.pfwc-op-reach-num{font-family:var(--font-mono);font-weight:900;font-size:clamp(2rem,5vw,3rem);color:var(--tx-1)}
.pfwc-op-reach-num-gold{background:var(--pfwc-grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.pfwc-op-reach-sub{font-size:.8rem;color:var(--tx-3)}
.pfwc-op-reach-arrow{color:var(--pfp-green);opacity:.7;display:flex;align-items:center}
.pfwc-op-reach-arrow svg{width:40px;height:24px}
.pfwc-op-reach-stat-hero{transform:scale(1.15)}
.pfwc-op-reach-note{text-align:center;font-size:.8rem;color:var(--tx-3);margin-top:1.5rem;max-width:480px;margin-left:auto;margin-right:auto}

/* Firms grid */
.pfwc-op-firms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.9rem}
.pfwc-op-firm-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.25rem .75rem;transition:all .25s;
}
.pfwc-op-firm-card:hover{transform:translateY(-3px);border-color:var(--pfp-green-border,rgba(0,212,160,.3));box-shadow:0 8px 24px rgba(0,0,0,.3), 0 0 20px rgba(0,212,160,.1)}
.pfwc-op-firm-avatar{
  width:48px!important;height:48px!important;object-fit:cover!important;flex-shrink:0;
  background:var(--bg-raised);border:1.5px solid var(--border-md);
  border-radius:7px;
}
.pfwc-op-firm-name{font-size:.8rem;font-weight:700;color:var(--tx-1);text-align:center;line-height:1.25}
.pfwc-op-firm-seed{font-family:var(--font-mono);font-size:.66rem;color:var(--tx-3)}

.pfwc-op-firms-note{text-align:center;font-size:.85rem;color:var(--tx-3);margin:1.5rem auto 0;font-style:italic}
.pfwc-op-compete{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  max-width:520px;margin:2rem auto 0;padding:1.5rem;text-align:center;
  background:linear-gradient(160deg, var(--bg-card), rgba(0,212,160,.05));
  border:1px solid var(--pfp-green-border,rgba(0,212,160,.2));border-radius:var(--r-xl);
}
.pfwc-op-compete-label{font-size:.92rem;font-weight:700;color:var(--tx-1)}
.pfwc-op-compete-email{
  font-family:var(--font-mono);font-size:1rem;font-weight:800;text-decoration:none;
  background:var(--pfwc-grad-live);-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:opacity .2s;
}
.pfwc-op-compete-email:hover{opacity:.8}

/* Voting explainer */
.pfwc-op-explainer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;max-width:900px;margin:0 auto}
.pfwc-op-explainer-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:2rem;text-align:center;
}
.pfwc-op-explainer-icon{
  width:52px;height:52px;margin:0 auto .9rem;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--pfp-green);
  background:linear-gradient(160deg, var(--pfp-green-bg,rgba(0,212,160,.12)), transparent);
  border:1px solid var(--pfp-green-border,rgba(0,212,160,.25));
  box-shadow:0 0 20px rgba(0,212,160,.12);
}
.pfwc-op-explainer-icon svg{width:26px;height:26px}
.pfwc-op-explainer-card h3{font-family:var(--font-heading);font-weight:800;font-size:1.1rem;margin:0 0 .75rem;color:var(--tx-1)}
.pfwc-op-explainer-card p{font-size:.88rem;color:var(--tx-2);line-height:1.6;text-align:left}

/* Prizes */
.pfwc-op-prizes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;max-width:900px;margin:0 auto}
.pfwc-op-prize-col-hdr{font-family:var(--font-heading);font-weight:800;font-size:1.05rem;color:var(--tx-1);margin:0 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.pfwc-op-prize-item{display:flex;align-items:flex-start;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--border)}
.pfwc-op-prize-item:last-child{border-bottom:none}
.pfwc-op-prize-dot{flex-shrink:0;width:9px;height:9px;border-radius:50%;margin-top:.35rem;background:var(--pfwc-grad-live);box-shadow:0 0 8px rgba(0,212,160,.5)}
.pfwc-op-prize-dot-gold{background:var(--pfwc-grad-gold);box-shadow:0 0 8px rgba(245,158,11,.5)}
.pfwc-op-prize-title{display:block;font-weight:700;font-size:.9rem;color:var(--tx-1)}
.pfwc-op-prize-detail{display:block;font-size:.78rem;color:var(--tx-3);margin-top:.1rem}

/* Schedule timeline */
.pfwc-op-timeline{max-width:560px;margin:0 auto;position:relative}
.pfwc-op-timeline::before{content:'';position:absolute;left:17px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg, var(--pfp-green-border,rgba(0,212,160,.3)), transparent)}
.pfwc-op-timeline-item{display:flex;align-items:center;gap:1rem;padding:.9rem 0;position:relative}
.pfwc-op-timeline-marker{
  position:relative;z-index:1;flex-shrink:0;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:800;font-size:.85rem;
  background:var(--bg-card);border:1.5px solid var(--pfp-green-border,rgba(0,212,160,.35));color:var(--pfp-green);
}
.pfwc-op-timeline-content{display:flex;flex-direction:column;flex:1}
.pfwc-op-timeline-round{font-weight:700;font-size:.92rem;color:var(--tx-1)}
.pfwc-op-timeline-date{font-family:var(--font-mono);font-size:.78rem;color:var(--tx-3)}

.pfwc-op-final-cta{text-align:center}
.pfwc-op-final-cta h2{font-family:var(--font-heading);font-weight:900;font-size:1.6rem;color:var(--tx-1);margin:0 0 1.5rem}

@media (max-width:640px){
  .pfwc-op-hero{padding:3.5rem 1rem 2.5rem}
  .pfwc-op-hero-trophy{width:120px!important;height:120px!important}
  .pfwc-op-hero-rings{width:340px}
  .pfwc-op-cd-box{width:68px;height:68px}
  .pfwc-op-cd-num{font-size:1.3rem}
  .pfwc-op-reach-grid{gap:1.25rem}
  .pfwc-op-reach-arrow{display:none}
  .pfwc-op-section{padding:2.5rem 1rem}
}

/* ================================================================
   LIVE VOTE CARDS (Bracket tab) - the community vote that decides
   who advances. Two firms with vote buttons + result bars that
   reveal after the user votes.
   ================================================================ */
.pfwc-vote-section{margin:0 0 2.5rem}
.pfwc-vote-hdr .pfwc-eyebrow{display:inline-flex;align-items:center;gap:.4rem}
.pfwc-vote-sub{font-size:.85rem;color:var(--tx-3);margin:.35rem 0 0}
.pfwc-vote-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.9rem;margin-top:1.25rem}

.pfwc-vote-card{
  background:var(--bg-card);border:1px solid var(--pfp-green-border,rgba(0,212,160,.25));
  border-radius:var(--r-lg);padding:1rem;animation:pfwc-pulse-glow 2.4s ease-in-out infinite;
}
.pfwc-vote-teams{display:flex;align-items:stretch;gap:.6rem}
.pfwc-vote-vs{align-self:center;font-family:var(--font-heading);font-weight:900;font-size:.7rem;color:var(--tx-3);flex-shrink:0}

.pfwc-vote-side{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;gap:.5rem;padding:.7rem;border-radius:var(--r-md);background:var(--bg-raised);border:1px solid var(--border);overflow:hidden}
.pfwc-vote-side-mine{border-color:var(--pfp-green);box-shadow:0 0 14px rgba(0,212,160,.2)}

/* Tally bar sits behind the content; hidden (0 opacity) until the
   card gains the -revealed class after voting, so people vote blind. */
.pfwc-vote-bar{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .3s}
.pfwc-vote-card-revealed .pfwc-vote-bar{opacity:1}
.pfwc-vote-bar-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(0,212,160,.18),rgba(0,212,160,.06));transition:width .5s ease}
.pfwc-vote-side-mine .pfwc-vote-bar-fill{background:linear-gradient(90deg,rgba(0,212,160,.32),rgba(0,212,160,.1))}

.pfwc-vote-side-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center}
.pfwc-vote-avatar{width:40px!important;height:40px!important;object-fit:cover!important;flex-shrink:0;background:var(--bg-card);border:1px solid var(--border-md);border-radius:7px}
.pfwc-vote-side-mine .pfwc-vote-avatar{border-color:var(--pfp-green)}
.pfwc-vote-name{font-size:.85rem;font-weight:700;color:var(--tx-1);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Percentage hidden until revealed - avoids biasing the vote. */
.pfwc-vote-pct{position:relative;z-index:1;font-family:var(--font-mono);font-weight:800;font-size:1rem;color:var(--pfp-green);opacity:0;height:0;transition:opacity .3s}
.pfwc-vote-card-revealed .pfwc-vote-pct{opacity:1;height:auto}

.pfwc-vote-btn{position:relative;z-index:1;width:100%;padding:.45rem;border:none;border-radius:6px;background:var(--pfwc-grad-live);color:#07090F;font-weight:800;font-size:.82rem;cursor:pointer;transition:all .2s}
.pfwc-vote-btn:hover:not(:disabled){box-shadow:0 0 14px rgba(0,212,160,.45)}
.pfwc-vote-btn:disabled{opacity:.5;cursor:default}
.pfwc-vote-badge{position:relative;z-index:1;font-size:.74rem;font-weight:800;color:var(--pfp-green);text-align:center}
.pfwc-vote-signin{width:100%;margin-top:.75rem;padding:.5rem;border:1px solid var(--pfp-green-border,rgba(0,212,160,.3));border-radius:6px;background:transparent;color:var(--pfp-green);font-weight:700;font-size:.82rem;cursor:pointer}
.pfwc-vote-signin:hover{background:var(--pfp-green-bg,rgba(0,212,160,.08))}

/* ================================================================
   EARN POINTS - task list with SVG icons and claim buttons.
   ================================================================ */
.pfwc-earn-sub{font-size:.85rem;color:var(--tx-3);margin:.35rem 0 0}
.pfwc-earn-list{display:flex;flex-direction:column;gap:.6rem;margin-top:1.25rem}
.pfwc-earn-card{
  display:flex;align-items:center;gap:1rem;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:.9rem 1.1rem;transition:all .2s;
}
.pfwc-earn-card:hover{border-color:var(--border-md);transform:translateX(2px)}
.pfwc-earn-card-done{opacity:.62}
.pfwc-earn-ic{
  flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--pfp-green);
  background:linear-gradient(160deg,var(--pfp-green-bg,rgba(0,212,160,.12)),transparent);
  border:1px solid var(--pfp-green-border,rgba(0,212,160,.2));
}
.pfwc-earn-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.pfwc-earn-title{font-weight:700;font-size:.95rem;color:var(--tx-1)}
.pfwc-earn-desc{font-size:.8rem;color:var(--tx-3)}
.pfwc-earn-right{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
.pfwc-earn-pts{
  font-family:var(--font-mono);font-weight:900;font-size:1rem;
  background:var(--pfwc-grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pfwc-earn-btn{
  padding:.4rem 1rem;border:none;border-radius:100px;cursor:pointer;
  background:var(--pfwc-grad-live);color:#07090F;font-weight:800;font-size:.8rem;transition:all .2s;
}
.pfwc-earn-btn:hover:not(:disabled){box-shadow:0 0 14px rgba(0,212,160,.45)}
.pfwc-earn-btn:disabled{opacity:.5;cursor:default}
.pfwc-earn-claimed{font-size:.78rem;font-weight:800;color:var(--pfp-green)}
@media(max-width:520px){
  .pfwc-earn-card{gap:.7rem;padding:.8rem}
  .pfwc-earn-ic{width:38px;height:38px}
}

/* Upcoming-voting banner on the Bracket tab (shown when predictions
   are open but nothing is live yet). */
.pfwc-vote-upcoming{
  text-align:center;padding:1.75rem 1.5rem;margin:0 0 2rem;
  background:linear-gradient(160deg,var(--bg-card),rgba(245,158,11,.05));
  border:1px solid var(--border);border-radius:var(--r-lg);
}
.pfwc-vote-upcoming-lead{color:var(--tx-2);font-size:.9rem;max-width:520px;margin:.4rem auto .9rem}
.pfwc-vote-upcoming-lead strong{color:var(--pfp-green)}
.pfwc-vote-upcoming-cd{
  display:inline-block;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-2);
  background:var(--bg-raised);border:1px solid var(--border-md);border-radius:100px;padding:.55rem 1.2rem;
}
.pfwc-vote-upcoming-cd .pfwc-cd-val{font-family:var(--font-mono);font-weight:900;font-size:1rem;color:var(--pfp-gold,#F59E0B);letter-spacing:0}

/* Compact voting status strip at the top of the Bracket tab (voting is
   now done inline in the bracket cards, so this is just a status/CTA). */
.pfwc-vote-strip{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.7rem 1rem;margin:0 0 1.5rem;border-radius:var(--r-md);
  background:linear-gradient(160deg,var(--bg-card),rgba(245,158,11,.04));border:1px solid var(--border);
}
.pfwc-vote-strip-live{border-color:var(--pfp-green-border,rgba(0,212,160,.3));background:linear-gradient(160deg,var(--bg-card),rgba(0,212,160,.05))}
.pfwc-vote-strip-badge{
  display:inline-flex;align-items:center;gap:.4rem;flex-shrink:0;
  font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--pfp-green);
  background:var(--pfp-green-bg,rgba(0,212,160,.1));border:1px solid var(--pfp-green-border,rgba(0,212,160,.3));
  padding:.3rem .7rem;border-radius:100px;
}
.pfwc-vote-strip-badge-soon{color:var(--pfp-gold,#F59E0B);background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3)}
.pfwc-vote-strip-text{flex:1;min-width:180px;font-size:.82rem;color:var(--tx-2)}
.pfwc-vote-strip-text strong{color:var(--pfp-green)}
.pfwc-vote-strip-cd{flex-shrink:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tx-3)}
.pfwc-vote-strip-cd .pfwc-cd-val{font-family:var(--font-mono);font-weight:800;color:var(--pfp-gold,#F59E0B);letter-spacing:0}

/* ================================================================
   TOP COUNTDOWN CLOCK - shown at the top of the Predict and Bracket
   tabs so it's always clear when predictions close and voting opens
   or closes. Same component on both tabs for consistency.
   ================================================================ */
.pfwc-clock{
  border-radius:var(--r-lg);padding:1rem 1.25rem;margin:0 0 1.5rem;
  background:linear-gradient(135deg, var(--bg-card), rgba(245,158,11,.05));
  border:1px solid var(--border);
}
.pfwc-clock-face{display:flex;align-items:center;gap:.85rem}
.pfwc-clock-icon{
  flex-shrink:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--pfp-gold,#F59E0B);
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.28);
}
.pfwc-clock-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.pfwc-clock-label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-3)}
.pfwc-clock-val{font-family:var(--font-mono,monospace);font-size:1.35rem;font-weight:900;color:var(--tx-1);line-height:1.1}
.pfwc-clock-val .pfwc-cd-val{color:var(--pfp-gold,#F59E0B)}
.pfwc-clock-note{margin:.7rem 0 0;font-size:.8rem;color:var(--tx-3);line-height:1.4}
.pfwc-clock-note strong{color:var(--pfp-green)}

/* Live variant (voting open) - green accent */
.pfwc-clock-live{background:linear-gradient(135deg, var(--bg-card), rgba(0,212,160,.06));border-color:var(--pfp-green-border,rgba(0,212,160,.3))}
.pfwc-clock-live .pfwc-clock-icon{color:var(--pfp-green);background:var(--pfp-green-bg,rgba(0,212,160,.1));border-color:var(--pfp-green-border,rgba(0,212,160,.3));position:relative}
.pfwc-clock-live .pfwc-clock-val{color:var(--pfp-green)}
.pfwc-clock-live .pfwc-clock-val .pfwc-cd-val{color:var(--pfp-green)}
.pfwc-clock-live .pfwc-live-dot{position:static}

@media (max-width:520px){
  .pfwc-clock-val{font-size:1.15rem}
  .pfwc-clock{padding:.85rem 1rem}
}

/* ================================================================
   MY BETS - list of the user's active wagers with cancel buttons.
   Lives in the Predict aside, under the bet slip.
   ================================================================ */
.pfwc-mybets{margin-top:1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1rem}
.pfwc-mybets[data-empty="1"] .pfwc-mybets-list{display:none}
.pfwc-mybets-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.pfwc-mybets-count{
  font-family:var(--font-mono);font-weight:800;font-size:.75rem;color:var(--pfp-green);
  background:var(--pfp-green-bg,rgba(0,212,160,.1));border:1px solid var(--pfp-green-border,rgba(0,212,160,.25));
  border-radius:100px;padding:.1rem .55rem;min-width:1.5rem;text-align:center;
}
.pfwc-mybets-empty{font-size:.8rem;color:var(--tx-3);margin:0;line-height:1.5}
.pfwc-mybets-list{display:flex;flex-direction:column;gap:.5rem}
.pfwc-mybet{
  display:flex;align-items:center;gap:.6rem;
  background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:.6rem .7rem;
}
.pfwc-mybet-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.pfwc-mybet-pick{font-weight:700;font-size:.85rem;color:var(--tx-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfwc-mybet-vs{font-size:.7rem;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfwc-mybet-right{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:.1rem}
.pfwc-mybet-wager{font-family:var(--font-mono);font-weight:800;font-size:.82rem;color:var(--tx-1)}
.pfwc-mybet-win{font-size:.66rem;color:var(--pfp-green)}
.pfwc-mybet-cancel{
  flex-shrink:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-md);border-radius:6px;background:transparent;color:var(--tx-3);cursor:pointer;
  transition:all .15s;
}
.pfwc-mybet-cancel:hover{border-color:#F87171;color:#F87171;background:rgba(248,113,113,.08)}
.pfwc-mybet-cancel:disabled{opacity:.4;cursor:default}
.pfwc-mybet-locked{flex-shrink:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center}

/* "manage in My bets" inline link on a matchup row */
.pfwc-pk-managebets{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  color:var(--pfp-green);font:inherit;font-size:.78rem;font-weight:700;text-decoration:underline;text-underline-offset:2px;
}
.pfwc-pk-managebets:hover{opacity:.8}

/* ================================================================
   INVITE / REFERRAL CARD - top of the Earn Points panel. The
   highest-value earn action, so it gets a prominent gradient card.
   ================================================================ */
.pfwc-invite-card{
  background:linear-gradient(150deg, rgba(0,212,160,.12), var(--bg-card) 55%);
  border:1px solid var(--pfp-green-border,rgba(0,212,160,.3));border-radius:var(--r-lg);
  padding:1.25rem 1.35rem;margin:0 0 1.5rem;
}
.pfwc-invite-head{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:1rem}
.pfwc-invite-ic{
  flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  color:var(--pfp-green);background:var(--pfp-green-bg,rgba(0,212,160,.12));border:1px solid var(--pfp-green-border,rgba(0,212,160,.28));
}
.pfwc-invite-title{display:block;font-family:var(--font-heading,sans-serif);font-weight:800;font-size:1.02rem;color:var(--tx-1);line-height:1.25}
.pfwc-invite-sub{display:block;font-size:.82rem;color:var(--tx-3);margin-top:.2rem;line-height:1.4}

.pfwc-invite-linkrow{display:flex;gap:.5rem;margin-bottom:.7rem}
.pfwc-invite-link{
  flex:1;min-width:0;background:var(--bg-raised);border:1px solid var(--border-md);border-radius:8px;
  padding:.6rem .75rem;color:var(--tx-2);font-size:.82rem;font-family:var(--font-mono,monospace);
}
.pfwc-invite-link:focus{outline:none;border-color:var(--pfp-green)}
.pfwc-invite-copy{
  flex-shrink:0;position:relative;padding:.6rem 1.1rem;border:none;border-radius:8px;cursor:pointer;
  background:var(--pfwc-grad-live,linear-gradient(135deg,#00D4A0,#00B4D8));color:#07090F;font-weight:800;font-size:.82rem;
  transition:box-shadow .2s;
}
.pfwc-invite-copy:hover{box-shadow:0 0 16px rgba(0,212,160,.45)}
.pfwc-invite-copy-done{display:none}
.pfwc-invite-copied .pfwc-invite-copy-idle{display:none}
.pfwc-invite-copied .pfwc-invite-copy-done{display:inline}

.pfwc-invite-share{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.pfwc-invite-share-btn{
  font-size:.76rem;font-weight:700;color:var(--tx-2);text-decoration:none;
  background:var(--bg-raised);border:1px solid var(--border-md);border-radius:100px;padding:.35rem .8rem;transition:all .15s;
}
.pfwc-invite-share-btn:hover{border-color:var(--pfp-green);color:var(--pfp-green)}

.pfwc-invite-stats{display:flex;gap:2rem;padding-top:.9rem;border-top:1px solid var(--border)}
.pfwc-invite-stat{display:flex;flex-direction:column;gap:.1rem}
.pfwc-invite-stat strong{font-family:var(--font-mono,monospace);font-size:1.3rem;font-weight:900;color:var(--pfp-green);line-height:1}
.pfwc-invite-stat span{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tx-3)}

@media (max-width:520px){
  .pfwc-invite-linkrow{flex-direction:column}
  .pfwc-invite-copy{width:100%}
}

/* ================================================================
   COLORFUL UPGRADE LAYER (v6.4)
   ================================================================
   Lifts the app out of flat black-on-black: a gradient hero accent
   on the topbar, slightly lifted card surfaces, colored logo rings,
   and warmer, context-aware round labels. Kept additive and subtle
   so nothing in the existing layout breaks.
   ================================================================ */

/* Topbar - clean single-color surface (no gradient strip) */
.pfwc-app-topbar{
  background:linear-gradient(180deg, #1a2140, var(--bg-card) 88%)!important;
  border-bottom:1px solid rgba(99,102,241,.22)!important;
  position:relative;
}

/* Lift the bracket cards off the page: a touch lighter, softer border */
.pfwc-tc{background:linear-gradient(180deg,#1b2340,#141a32)!important;border-color:rgba(99,102,241,.16)!important}
.pfwc-tc-voting{background:linear-gradient(180deg,#182a3d,#122031)!important}

/* Colored ring around every firm logo so the grid feels alive.
   The ring uses each context's accent; brand-specific tinting can be
   layered later per firm. */
/* Unified logo ring: one teal->sky gradient edge with a soft glow on
   every firm logo (instead of a different color per context). The
   double-background trick gives a true ROUNDED gradient border that
   follows the 7px radius, plus a glow via box-shadow. */
.pfwc-tc-avatar{
  border:2px solid transparent!important;
  background:
    linear-gradient(var(--bg-raised,#151b2e),var(--bg-raised,#151b2e)) padding-box,
    linear-gradient(135deg,#00F0B8,#00D4A0 45%,#38BDF8) border-box!important;
  box-shadow:0 0 10px rgba(0,212,160,.30)!important;
}
/* Logo images fill the ring; keep their own image on top of the tint. */
img.pfwc-tc-avatar{
  background:
    linear-gradient(135deg,#00F0B8,#00D4A0 45%,#38BDF8) border-box!important;
  object-fit:cover!important;
}
.pfwc-tc-vslot-mine .pfwc-tc-avatar{box-shadow:0 0 15px rgba(0,240,184,.55)!important}
.pfwc-tc-slot-winner .pfwc-tc-avatar{box-shadow:0 0 15px rgba(56,189,248,.5)!important}
.pfwc-tc-final .pfwc-tc-avatar{box-shadow:0 0 18px rgba(0,212,160,.5)!important}

/* Warmer, context-aware round labels (was plain gray pills) */
.pfwc-tree-col-label, .pfwc-mob-round-label{color:#38BDF8}
.pfwc-round-badge, .pfwc-tree-round-badge{
  background:rgba(56,189,248,.1)!important;border-color:rgba(56,189,248,.3)!important;color:#38BDF8!important;
}

/* Section eyebrows get a hint of color variety */
.pfwc-eyebrow{color:#38BDF8}
.pfwc-vote-hdr .pfwc-eyebrow{color:#00D4A0}

/* Topbar points chip - richer */
.pfwc-app-points, .pfwc-points-chip{
  background:linear-gradient(135deg,rgba(79,70,229,.18),rgba(0,212,160,.12))!important;
  border-color:rgba(99,102,241,.4)!important;
}

/* ================================================================
   TOURNAMENT RESULTS - podium screen (Bracket tab, when complete)
   ================================================================ */
.pfwc-results{position:relative;padding:1rem 0 2rem;overflow:hidden}
.pfwc-results-hero{text-align:center;margin:0 0 2.5rem;position:relative;z-index:2}
.pfwc-results-eyebrow{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(90deg,#00F0B8,#38BDF8);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:.6rem;
}
.pfwc-results-title{
  font-family:var(--font-heading,sans-serif);font-size:2.4rem;font-weight:900;margin:0;line-height:1.05;
  background:linear-gradient(120deg,#FFFFFF 20%,#CDE8FF 55%,#8BD9C6);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pfwc-results-sub{margin:.6rem 0 0;color:var(--tx-3);font-size:1rem}

/* Ambient gradient wash behind the whole results screen */
.pfwc-results::before{
  content:'';position:absolute;left:50%;top:-10%;width:900px;height:620px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,212,160,.14),rgba(56,189,248,.08) 40%,transparent 70%);
  pointer-events:none;z-index:0;
}

/* Podium row */
.pfwc-podium{
  display:flex;justify-content:center;align-items:flex-end;gap:1.25rem;flex-wrap:nowrap;
  position:relative;z-index:2;max-width:900px;margin:0 auto;
}
.pfwc-pod{display:flex;flex-direction:column;align-items:center;flex:1 1 0;min-width:0;max-width:300px}
.pfwc-pod-1{max-width:340px}

.pfwc-pod-rank{
  font-family:var(--font-mono,monospace);font-weight:900;font-size:1.6rem;margin-bottom:.4rem;line-height:1;
  color:#C0C6D4;
}
.pfwc-pod-rank-1{
  font-size:2.2rem;
  background:linear-gradient(135deg,#FDE68A,#F59E0B);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pfwc-pod-2 .pfwc-pod-rank{color:#C0C6D4}
.pfwc-pod-3 .pfwc-pod-rank{color:#CD7F45}

.pfwc-pod-card{
  position:relative;width:100%;border-radius:18px;padding:1.4rem 1rem 1.5rem;text-align:center;
  background:linear-gradient(180deg,rgba(30,39,71,.9),rgba(13,17,32,.95));
  border:1px solid rgba(148,163,184,.18);
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
}
.pfwc-pod-2 .pfwc-pod-card{border-color:rgba(192,198,212,.4);background:linear-gradient(180deg,rgba(40,48,74,.85),rgba(13,17,32,.95))}
.pfwc-pod-3 .pfwc-pod-card{border-color:rgba(205,127,69,.4);background:linear-gradient(180deg,rgba(58,42,28,.55),rgba(13,17,32,.95))}

/* Champion card - richer gradient + strong glow */
.pfwc-pod-card-1{
  padding:1.9rem 1.2rem 2rem;
  background:linear-gradient(165deg,rgba(80,60,10,.55),rgba(30,39,71,.9) 45%,rgba(13,17,32,.98));
  border:2px solid #F5C542;
  box-shadow:0 0 0 1px rgba(245,197,66,.25),0 20px 60px rgba(245,158,11,.28),0 0 80px rgba(245,197,66,.18);
}
.pfwc-pod-glow{
  position:absolute;inset:-40% -20% auto -20%;height:180%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,rgba(245,197,66,.35),rgba(245,158,11,.12) 45%,transparent 70%);
  animation:pfwc-pulse 3.5s ease-in-out infinite;
}
@keyframes pfwc-pulse{0%,100%{opacity:.7}50%{opacity:1}}

.pfwc-pod-crown{margin-bottom:.35rem;filter:drop-shadow(0 4px 10px rgba(245,158,11,.5));animation:pfwc-float 3s ease-in-out infinite}
@keyframes pfwc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Logos with gradient rings by rank */
.pfwc-pod-logo{display:block;position:relative;z-index:2;border:2px solid transparent;
  background:linear-gradient(var(--bg-card,#111827),var(--bg-card,#111827)) padding-box, #334 border-box;}
.pfwc-pod-logo-fallback{display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-family:var(--font-heading,sans-serif);font-size:1.4rem}
.pfwc-pod-ring-gold{
  background:linear-gradient(var(--bg-card,#111827),var(--bg-card,#111827)) padding-box,
    linear-gradient(135deg,#FDE68A,#F59E0B 55%,#D97706) border-box!important;
  box-shadow:0 0 24px rgba(245,197,66,.6);border-width:3px!important;
}
.pfwc-pod-ring-silver{
  background:linear-gradient(var(--bg-card,#111827),var(--bg-card,#111827)) padding-box,
    linear-gradient(135deg,#E2E8F0,#94A3B8) border-box!important;
  box-shadow:0 0 16px rgba(192,198,212,.4);border-width:3px!important;
}
.pfwc-pod-ring-bronze{
  background:linear-gradient(var(--bg-card,#111827),var(--bg-card,#111827)) padding-box,
    linear-gradient(135deg,#E9A66B,#CD7F45) border-box!important;
  box-shadow:0 0 16px rgba(205,127,69,.4);border-width:3px!important;
}

.pfwc-pod-name{font-family:var(--font-heading,sans-serif);font-weight:800;font-size:1.05rem;color:#fff;line-height:1.2}
.pfwc-pod-name-1{font-size:1.35rem}
.pfwc-pod-badge{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:.25rem .7rem;border-radius:100px}
.pfwc-pod-badge-gold{background:linear-gradient(135deg,#FDE68A,#F59E0B);color:#3B2E02}
.pfwc-pod-badge-silver{background:rgba(192,198,212,.18);color:#D5DAE4;border:1px solid rgba(192,198,212,.4)}
.pfwc-pod-badge-bronze{background:rgba(205,127,69,.18);color:#E9A66B;border:1px solid rgba(205,127,69,.4)}
.pfwc-pod-meta{font-size:.82rem;color:var(--tx-3)}
.pfwc-pod-meta-1{color:#CBD5E1;font-weight:600}

/* Plinths (bar heights differ by rank) */
.pfwc-pod-plinth{width:100%;border-radius:10px 10px 0 0;margin-top:.9rem}
.pfwc-pod-plinth-1{height:70px;background:linear-gradient(180deg,rgba(245,197,66,.35),rgba(245,158,11,.08))}
.pfwc-pod-plinth-2{height:44px;background:linear-gradient(180deg,rgba(192,198,212,.28),rgba(192,198,212,.04))}
.pfwc-pod-plinth-3{height:30px;background:linear-gradient(180deg,rgba(205,127,69,.28),rgba(205,127,69,.04))}

/* Your-tournament strip */
.pfwc-results-you{
  position:relative;z-index:2;max-width:900px;margin:2.5rem auto 0;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(0,212,160,.08),var(--bg-card));
  border:1px solid var(--pfp-green-border,rgba(0,212,160,.3));border-radius:var(--r-lg);padding:1.1rem 1.4rem;
}
.pfwc-results-you-label{display:block;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-3);margin-bottom:.2rem}
.pfwc-results-you-stat{font-size:1.05rem;color:#fff}
.pfwc-results-you-won{
  flex-shrink:0;font-family:var(--font-mono,monospace);font-weight:800;font-size:1rem;color:var(--pfp-green);
  background:var(--pfp-green-bg,rgba(0,212,160,.1));border:1px solid var(--pfp-green-border,rgba(0,212,160,.3));
  border-radius:100px;padding:.4rem .9rem;
}

/* Store-still-open card */
.pfwc-results-store{
  position:relative;z-index:2;max-width:900px;margin:1.25rem auto 0;overflow:hidden;
  background:linear-gradient(135deg,rgba(56,189,248,.1),rgba(79,70,229,.08) 60%,var(--bg-card));
  border:1px solid rgba(56,189,248,.3);border-radius:var(--r-lg);padding:1.5rem 1.6rem;
}
.pfwc-results-store-title{margin:0 0 .35rem;font-size:1.3rem;font-weight:800;color:#fff}
.pfwc-results-store-text{margin:0 0 1rem;color:var(--tx-3);font-size:.95rem}
.pfwc-results-store-btn{
  border:none;border-radius:10px;padding:.7rem 1.4rem;cursor:pointer;font-weight:800;font-size:.92rem;color:#07090F;
  background:linear-gradient(135deg,#00F0B8,#38BDF8);transition:box-shadow .2s,transform .15s;
}
.pfwc-results-store-btn:hover{box-shadow:0 0 22px rgba(0,212,160,.5)}
.pfwc-results-store-glow{position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.25),transparent 70%);pointer-events:none}

/* Responsive: stack podium on narrow screens, champion first */
@media (max-width:680px){
  .pfwc-podium{flex-direction:column;align-items:stretch;gap:.9rem;max-width:360px}
  .pfwc-pod{max-width:none;width:100%}
  .pfwc-pod-1{order:-1}
  .pfwc-pod-plinth{display:none}
  .pfwc-results-title{font-size:1.8rem}
}

/* ================================================================
   PREDICTION HISTORY - full-width panel on the Predict tab
   ================================================================ */
.pfwc-history{flex:0 0 100%;width:100%;margin-top:.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem 1.4rem}
.pfwc-history-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.pfwc-history-title{margin:0;font-size:1.15rem;font-weight:800;color:var(--tx-1)}
.pfwc-history-stats{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--tx-3)}
.pfwc-history-stat strong{font-family:var(--font-mono,monospace);font-weight:800}
.pfwc-hs-won strong{color:var(--pfp-green)}
.pfwc-hs-lost strong{color:#F87171}
.pfwc-hs-pending strong{color:#FBBF24}
.pfwc-net-pos{color:var(--pfp-green)}
.pfwc-net-neg{color:#F87171}

.pfwc-history-list{display:flex;flex-direction:column;gap:.5rem}
.pfwc-hrow{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.9rem;
  background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:.65rem .85rem;
}
.pfwc-hrow-won{border-left:3px solid var(--pfp-green)}
.pfwc-hrow-lost{border-left:3px solid #F87171}
.pfwc-hrow-pending{border-left:3px solid #FBBF24}
.pfwc-hrow-badge{
  font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  padding:.22rem .6rem;border-radius:100px;flex-shrink:0;min-width:58px;text-align:center;
}
.pfwc-hrow-badge-won{background:var(--pfp-green-bg,rgba(0,212,160,.12));color:var(--pfp-green);border:1px solid var(--pfp-green-border,rgba(0,212,160,.3))}
.pfwc-hrow-badge-lost{background:rgba(248,113,113,.12);color:#F87171;border:1px solid rgba(248,113,113,.3)}
.pfwc-hrow-badge-pending{background:rgba(251,191,36,.12);color:#FBBF24;border:1px solid rgba(251,191,36,.3)}
.pfwc-hrow-main{min-width:0;display:flex;flex-direction:column;gap:.05rem}
.pfwc-hrow-pick{font-weight:700;font-size:.9rem;color:var(--tx-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfwc-hrow-vs{font-size:.72rem;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfwc-hrow-round{font-size:.72rem;color:var(--tx-3);white-space:nowrap;flex-shrink:0}
.pfwc-hrow-amt{text-align:right;flex-shrink:0;display:flex;flex-direction:column;gap:.05rem}
.pfwc-hrow-wager{font-family:var(--font-mono,monospace);font-size:.8rem;color:var(--tx-2)}
.pfwc-hrow-payout{font-family:var(--font-mono,monospace);font-size:.82rem;font-weight:800;color:var(--pfp-green)}
.pfwc-hrow-payout-neg{color:#F87171}
.pfwc-hrow-payout-pending{color:#FBBF24;font-weight:600;font-size:.72rem}

@media (max-width:560px){
  .pfwc-hrow{grid-template-columns:auto 1fr auto;gap:.6rem}
  .pfwc-hrow-round{display:none}
}

/* ================================================================
   PREDICT TOOLBAR + "My history" toggle button
   ================================================================ */
.pfwc-predict-toolbar{display:flex;justify-content:flex-end;margin:0 0 1rem}
.pfwc-history-toggle{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  padding:.5rem .95rem;border-radius:100px;font-weight:700;font-size:.85rem;
  background:var(--bg-card);color:var(--tx-2);border:1px solid var(--border-md);
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;
}
.pfwc-history-toggle:hover{border-color:var(--pfp-green-border,rgba(0,212,160,.4));color:var(--tx-1)}
.pfwc-history-toggle-on{
  background:var(--pfp-green-bg,rgba(0,212,160,.12));border-color:var(--pfp-green);color:var(--pfp-green);
}
.pfwc-history-toggle-count{
  font-family:var(--font-mono,monospace);font-weight:800;font-size:.72rem;
  background:var(--bg-raised);border-radius:100px;padding:.1rem .5rem;color:var(--tx-3);
}
.pfwc-history-toggle-on .pfwc-history-toggle-count{background:rgba(0,212,160,.18);color:var(--pfp-green)}