/* =====================================================================
   BITWORD CHALLENGE CHROME v1 - Fable 5, Step 209 assets (Sep 2 2026)
   This file IS the card chrome. Pages LINK it by URL:
     <link rel="stylesheet" href="/challenge/challenge_chrome.css">
   The build lane never re-types these values. A color that is not a
   var() from this file does not ship on a challenge surface.
   Hash-locked in /challenge/SHA256SUMS.txt. Revisions get a NEW file
   name (challenge_chrome_v2.css), never an edit in place.
   ===================================================================== */

:root{
  --bw-navy:#2f3150;
  --bw-ink:#2c3154;
  --bw-mint:#69dcb0;
  --bw-mint-dk:#17805e;
  --bw-mint-tint:#e6faf2;
  --bw-teal:#54bcc3;
  --bw-ice:#d7ffff;
  --bw-gold:#e0a83a;
  --bw-gold-deep:#c8912b;
  --bw-gold-shadow:#8a6414;
  --bw-red:#c9364b;
  --bw-wash:#f7f8fc;
  --bw-paper:#ffffff;
  --bw-line:#e4e6ee;
  --bw-muted:#6a7086;
  --bw-faint:#9296b2;
  --bw-card-core:#242a44;
  --bw-card-deep:#1d2340;
  --bw-arena-page:#1c2138;
  --bw-acc-blitz:#ffd23f;
  --bw-acc-sprint:#ff7a45;
  --bw-acc-rally:#e4576b;
  --bw-acc-series:#54bcc3;
  --bw-acc-season:#e0a83a;
  --bw-card-ground:linear-gradient(160deg,#2c3154 0%,#242a44 55%,#1d2340 100%);
  --bw-frame-top:linear-gradient(90deg,#69dcb0,#54bcc3);
  --bw-font:-apple-system,'Segoe UI',system-ui,Roboto,sans-serif;
}

/* ---- the card ---- */
.bwChCard{position:relative;overflow:hidden;background:var(--bw-card-ground);color:#fff;font-family:var(--bw-font);border-radius:18px}
.bwChCard::before{content:"";position:absolute;left:0;top:0;right:0;height:8px;background:var(--bw-frame-top);z-index:3}
.bwChCard::after{content:"";position:absolute;left:0;bottom:0;right:0;height:4px;background:var(--bw-red);z-index:3}

/* ---- the gold ray burst behind the medallion (position per surface) ---- */
.bwChRays{position:absolute;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(rgba(224,168,58,.055) 0deg 9deg, rgba(224,168,58,0) 9deg 30deg);-webkit-mask-image:radial-gradient(circle,#000 0%,transparent 62%);mask-image:radial-gradient(circle,#000 0%,transparent 62%)}
.bwChRaysMint{background:repeating-conic-gradient(rgba(105,220,176,.06) 0deg 9deg, rgba(105,220,176,0) 9deg 30deg)}

/* ---- the medallion + its belt studs ---- */
.bwChMedallion{display:block}
.bwChMedallion.hero{width:120px;height:120px}
.bwChMedallion.arena{width:110px;height:110px}
.bwChMedallion.preview{width:52px;height:52px}
.bwChMedallion.mini{width:40px;height:40px}
.bwChStud{width:8px;height:8px;border-radius:50%;background:var(--bw-gold-deep);flex-shrink:0}

/* ---- club names, fight-poster treatment ---- */
.bwChClubName{font-size:26px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.2;overflow-wrap:anywhere}
.bwChClubName.mini{font-size:15px}

/* ---- the @pills (the site's own pair) ---- */
.bwChPillA{display:inline-block;background:var(--bw-mint);color:var(--bw-card-deep);border-radius:999px;padding:3px 11px;font-size:11.5px;font-weight:800}
.bwChPillB{display:inline-block;background:transparent;color:var(--bw-ice);border:2px solid var(--bw-teal);border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:800}

/* ---- statements (R-208-9: one spot each side; absent at zero) ---- */
.bwChStmt{font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.92);font-style:italic}
.bwChStmtBy{font-size:11.5px;font-weight:800}
.bwChStmtBy.a{color:var(--bw-mint)}
.bwChStmtBy.b{color:var(--bw-teal)}

/* ---- scores + the crown ---- */
.bwChScore{font-size:74px;font-weight:900;line-height:1}
.bwChScore.a{color:#fff}
.bwChScore.b{color:var(--bw-ice)}
.bwChScoreExact{font-size:12px;color:var(--bw-faint);font-weight:600}
.bwChCrown{display:block;width:26px;height:auto;margin:0 auto 2px}

/* ---- tempo word + rule, timer, category chip, footer ---- */
.bwChTempo{font-size:15px;font-weight:800;letter-spacing:.24em}
.bwChTempoRule{width:28px;height:3px;border-radius:2px}
.bwChTempo.blitz,.bwChTempoRule.blitz{color:var(--bw-acc-blitz);background-color:transparent}
.bwChTempoRule.blitz{background-color:var(--bw-acc-blitz)}
.bwChTempo.sprint{color:var(--bw-acc-sprint)} .bwChTempoRule.sprint{background-color:var(--bw-acc-sprint)}
.bwChTempo.rally{color:var(--bw-acc-rally)} .bwChTempoRule.rally{background-color:var(--bw-acc-rally)}
.bwChTempo.series{color:var(--bw-acc-series)} .bwChTempoRule.series{background-color:var(--bw-acc-series)}
.bwChTempo.season{color:var(--bw-acc-season)} .bwChTempoRule.season{background-color:var(--bw-acc-season)}
.bwChTimer{border:1.5px solid rgba(105,220,176,.5);border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700;color:var(--bw-ice)}
.bwChCatChip{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 12px;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.75)}
.bwChFooter{border-top:1px solid rgba(255,255,255,.14);padding-top:13px;display:flex;justify-content:space-between;align-items:center}
.bwChWordmark{font-size:16px;font-weight:800;color:var(--bw-mint)}

/* ---- the FINAL pill + trophy ---- */
.bwChFinal{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(90deg,var(--bw-gold),var(--bw-gold-deep));color:var(--bw-card-deep);border-radius:999px;padding:6px 16px;font-size:13px;font-weight:800;letter-spacing:.08em}
.bwChFinal img{width:18px;height:18px;display:block}
.bwChRibbon{background:linear-gradient(90deg,var(--bw-gold),var(--bw-gold-deep));color:var(--bw-card-deep);border-radius:8px;padding:9px 26px;font-size:15px;font-weight:800;letter-spacing:.04em}

/* ---- the pending ? face ---- */
.bwChMystery{display:block;width:140px;height:140px;margin:0 auto}
.bwChMystery.mini{width:44px;height:44px}

/* ---- the two Joins (both navy text; mint = challenger side, ice = challenged side) ---- */
.bwChJoinA{background:var(--bw-mint);color:var(--bw-card-deep);border:0;border-radius:12px;padding:13px 18px;font-size:15px;font-weight:800;font-family:var(--bw-font)}
.bwChJoinB{background:var(--bw-ice);color:var(--bw-card-deep);border:0;border-radius:12px;padding:13px 18px;font-size:15px;font-weight:800;font-family:var(--bw-font)}

/* ---- profile / trophy case tiles ---- */
.bwChBadgeArt{display:block;width:84px;height:84px;margin:0 auto}
.bwChSupporterArt{display:block;width:64px;height:auto;margin:0 auto}

/* ---- the celebration overlay (inject celebration_join.svg markup inline; remove after 900ms) ---- */
.bwChCelebrate{position:absolute;left:50%;top:50%;width:220px;height:220px;transform:translate(-50%,-50%);pointer-events:none;z-index:9}

/* ---- poll share faces ride the same card; result bar ---- */
.bwChPollBar{height:14px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.bwChPollBarFill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--bw-mint),var(--bw-teal))}
.bwChPollPct{font-size:104px;font-weight:900;color:var(--bw-mint);line-height:1}