/* Coinflip — premium redesign. Loaded after coinflip.css and coinflip-clarity.css
   and restyles the same markup. CT blue against T amber over the site's night arena. */
body.coinflip-page{
  --p-bg:#0d1422;--p-glass:rgba(22,32,50,.66);--p-glass-2:rgba(28,40,62,.72);--p-line:rgba(255,255,255,.1);--p-line-2:rgba(255,255,255,.17);
  --p-text:#f1f4f9;--p-muted:#aab5c7;--p-dim:#7d899c;
  --p-ct:#5fb0ff;--p-ct-2:#2a78e4;--p-ct-ink:#04162c;--p-t:#ffad4a;--p-t-2:#e5781c;--p-t-ink:#2c1400;
  --p-gold:#ffd27a;--p-win:#42ddb9;--p-win-ink:#05241c;
  --x-ct:var(--p-ct);--x-t:var(--p-t);--ct:var(--p-ct);--t:var(--p-t);--x-muted:var(--p-muted);--x-dim:var(--p-dim);--x-line:var(--p-line);--x-line-2:var(--p-line-2);
  background-color:var(--p-bg)
}
/* one background, edge to edge, behind everything */
body.coinflip-page::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(35,105,215,.34) 0%,rgba(13,20,34,0) 34%,rgba(13,20,34,0) 66%,rgba(225,125,30,.3) 100%),
    linear-gradient(180deg,rgba(10,16,28,.18) 0%,rgba(10,16,28,.5) 55%,rgba(10,16,28,.82) 100%),
    url('/uploads/profile-modern/generated-bg-moonyard.png') center top/cover no-repeat,
    radial-gradient(120vw 80vh at 50% -10%,#1d2c46,#0d1422 70%)}
body.coinflip-page main{background:none!important;max-width:none}
body.coinflip-page main::before,body.coinflip-page main::after{content:none!important;background:none!important}
body.coinflip-page :is(button,input,a,summary):focus-visible{outline:2px solid #9fd0ff;outline-offset:3px}

body.coinflip-page #coinflipApp .cfx{width:min(1480px,100%);margin:0 auto;padding-top:6px;color:var(--p-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-feature-settings:"tnum" 1}

/* ---------- header ---------- */
body.coinflip-page #coinflipApp .cfx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:8px 0 20px}
body.coinflip-page #coinflipApp .cfx-head h1{margin:0;font-size:clamp(28px,2.6vw,38px);font-weight:900;letter-spacing:-.04em;line-height:1.05;color:#fff}
body.coinflip-page #coinflipApp .cfx-head p{margin:8px 0 0;max-width:64ch;color:#c5cedb;font-size:14.5px;line-height:1.55}
body.coinflip-page #coinflipApp .cfx-stats{display:flex;align-items:center;gap:10px}
body.coinflip-page #coinflipApp .cfx-stats>div{min-width:132px;padding:10px 16px;border:1px solid var(--p-line);border-radius:14px;background:var(--p-glass);box-shadow:inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(12px)}
body.coinflip-page #coinflipApp .cfx-stats small{display:block;color:var(--p-muted);font-size:12px;font-weight:650}
body.coinflip-page #coinflipApp .cfx-stats b{display:block;margin-top:2px;font-size:21px;font-weight:850;letter-spacing:-.025em;color:#fff}
body.coinflip-page #coinflipApp #cfxStatValue{color:var(--p-gold)}

/* sound switch */
.cfp-sound{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border:1px solid var(--p-line-2,rgba(255,255,255,.16));border-radius:12px;background:rgba(255,255,255,.06);color:#d5dce6;font:700 13px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.cfp-sound svg{width:18px;height:18px;fill:currentColor}
.cfp-sound svg .w{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.cfp-sound[aria-pressed="true"]{color:#fff;border-color:rgba(66,221,185,.45);background:rgba(66,221,185,.12)}
.cfp-sound:hover{color:#fff;background:rgba(255,255,255,.1)}

/* ---------- glass panels ---------- */
body.coinflip-page #coinflipApp .cfx-top{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start;margin-bottom:18px}
body.coinflip-page #coinflipApp .cfx-games,body.coinflip-page #coinflipApp .cfx-wager,body.coinflip-page #coinflipApp .cfx-inv{border:1px solid var(--p-line);border-radius:22px;background:var(--p-glass);box-shadow:0 24px 60px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(16px) saturate(1.2)}
body.coinflip-page #coinflipApp .cfx-games{padding:18px}
body.coinflip-page #coinflipApp .cfx-side-col{position:sticky;top:76px}
body.coinflip-page #coinflipApp .cfx-shown{color:var(--p-muted)}

body.coinflip-page #coinflipApp .cfx-seg{background:rgba(0,0,0,.25);border:1px solid var(--p-line);border-radius:13px;padding:4px}
body.coinflip-page #coinflipApp .cfx-seg::before{background:rgba(255,255,255,.12);border-radius:9px;box-shadow:inset 0 1px rgba(255,255,255,.12)}
body.coinflip-page #coinflipApp .cfx-seg button{color:var(--p-muted);font-weight:700}
body.coinflip-page #coinflipApp .cfx-seg button[aria-pressed="true"]{color:#fff}
body.coinflip-page #coinflipApp .cfx-seg[data-active="live"] .cfx-live-dot{background:var(--p-win);box-shadow:0 0 0 3px rgba(66,221,185,.2),0 0 10px var(--p-win)}
body.coinflip-page #coinflipApp .cfx-search,body.coinflip-page #coinflipApp .cf-live-select-trigger,body.coinflip-page #coinflipApp .cf-inv-select-trigger{background:rgba(255,255,255,.06);border:1px solid var(--p-line);border-radius:12px;color:#fff}
body.coinflip-page #coinflipApp .cfx-search input::placeholder{color:var(--p-dim)}
body.coinflip-page #coinflipApp .cfx-search:focus-within{border-color:rgba(95,176,255,.6);box-shadow:0 0 0 3px rgba(95,176,255,.15)}
body.coinflip-page #coinflipApp .cfx-vchips,body.coinflip-page #coinflipApp .cfx-gchips{background:rgba(255,255,255,.04);border:1px solid var(--p-line);border-radius:13px}
body.coinflip-page #coinflipApp .cfx-gchips button,body.coinflip-page #coinflipApp .cfx-vchips button{color:#e3e9f1;font-weight:650}
body.coinflip-page #coinflipApp .cfx-gchips button:hover,body.coinflip-page #coinflipApp .cfx-vchips button:hover{background:rgba(255,255,255,.08);color:#fff}
body.coinflip-page #coinflipApp .cfx-gchips .cfx-gico{filter:none!important;opacity:1!important}
body.coinflip-page #coinflipApp .cfx-gchips .cfx-gico img{border-radius:5px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
body.coinflip-page #coinflipApp .cfx-gchips button[aria-pressed="true"],body.coinflip-page #coinflipApp .cfx-vchips button[aria-pressed="true"]{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.12)}
body.coinflip-page #coinflipApp .cfx-count{background:rgba(255,255,255,.1);color:#dfe5ee}

/* ---------- live games ---------- */
body.coinflip-page #coinflipApp .cfx-game-grid{gap:14px}
body.coinflip-page #coinflipApp .cfx-game{--side:var(--p-ct);--side-2:var(--p-ct-2);position:relative;min-height:0;padding:16px;gap:12px;overflow:hidden;border:1px solid color-mix(in srgb,var(--side) 26%,rgba(255,255,255,.08));border-radius:18px;
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--side) 26%,transparent),transparent 62%),linear-gradient(180deg,rgba(30,43,66,.85),rgba(17,25,40,.9));box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.07);transition:border-color .18s,transform .18s,box-shadow .18s}
body.coinflip-page #coinflipApp .cfx-game.t{--side:var(--p-t);--side-2:var(--p-t-2)}
body.coinflip-page #coinflipApp .cfx-game::before{content:"";position:absolute;inset:0 auto auto 0;top:0;left:0;right:0;bottom:auto;width:auto;height:3px;border-radius:0;background:linear-gradient(90deg,var(--side),transparent 80%);opacity:1}
body.coinflip-page #coinflipApp .cfx-game:hover{border-color:color-mix(in srgb,var(--side) 55%,transparent);transform:translateY(-2px);box-shadow:0 20px 40px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--side) 25%,transparent),inset 0 1px rgba(255,255,255,.08)}
body.coinflip-page #coinflipApp .cfx-game.mine{border-color:rgba(66,221,185,.45)}
body.coinflip-page #coinflipApp .cfx-game-head b{font-size:14px;font-weight:750;color:#fff}
body.coinflip-page #coinflipApp .cfx-game-head small{color:var(--p-dim)}
body.coinflip-page #coinflipApp .cfx-game-value small,body.coinflip-page #coinflipApp .cfx-game-value span{color:var(--p-muted)}
body.coinflip-page #coinflipApp .cfx-game-value strong{font-size:30px;font-weight:900;letter-spacing:-.04em;color:#fff}
body.coinflip-page #coinflipApp .cfx-coin-badge,.cf-watch-overlay .cfx-coin-badge{background:radial-gradient(circle at 35% 30%,#3f86dd,#123766);box-shadow:0 0 0 2px rgba(95,176,255,.6),0 6px 16px rgba(30,100,220,.35)}
body.coinflip-page #coinflipApp .cfx-coin-badge.t,.cf-watch-overlay .cfx-coin-badge.t{background:radial-gradient(circle at 35% 30%,#d9852f,#5a2a06);box-shadow:0 0 0 2px rgba(255,173,74,.65),0 6px 16px rgba(220,120,30,.35)}
body.coinflip-page #coinflipApp .cfx-thumb{background:rgba(255,255,255,.06);border:1px solid var(--p-line);border-radius:10px}
body.coinflip-page #coinflipApp .cfx-who b{color:#fff}
body.coinflip-page #coinflipApp .cfx-who img{width:30px;height:30px;box-shadow:0 0 0 2px color-mix(in srgb,var(--side) 70%,transparent)}
body.coinflip-page #coinflipApp .cfx-game-vs i{color:var(--p-dim);font-style:normal;font-weight:800}
body.coinflip-page #coinflipApp .cfx-open-slot{border:1px dashed color-mix(in srgb,var(--p-ct) 60%,transparent);background:rgba(95,176,255,.08);color:#d6eaff}
body.coinflip-page #coinflipApp .cfx-open-slot.t{border-color:color-mix(in srgb,var(--p-t) 60%,transparent);background:rgba(255,173,74,.08);color:#ffe4c2}
body.coinflip-page #coinflipApp .cfx-game-foot{border-top:1px solid var(--p-line)}
body.coinflip-page #coinflipApp .cfx-game-foot small{color:var(--p-muted)}
body.coinflip-page #coinflipApp .cfx-game-foot b{color:#fff}
body.coinflip-page #coinflipApp .cfx-rp b{color:#fff}
body.coinflip-page #coinflipApp .cfx-rp small{color:var(--p-muted)}

/* buttons */
body.coinflip-page #coinflipApp .cfx-btn{height:42px;border-radius:12px;font-weight:800;font-size:14px}
body.coinflip-page #coinflipApp .cfx-btn.ghost{background:rgba(255,255,255,.07);border:1px solid var(--p-line-2);color:#eef2f7}
body.coinflip-page #coinflipApp .cfx-btn.ghost:hover:not(:disabled){background:rgba(255,255,255,.13)}
body.coinflip-page #coinflipApp .cfx-btn.join,body.coinflip-page #coinflipApp .cfx-cta{border:0;color:var(--p-ct-ink);background:linear-gradient(180deg,#9dd0ff 0%,var(--p-ct) 45%,var(--p-ct-2) 100%);box-shadow:inset 0 1px rgba(255,255,255,.6),inset 0 -2px rgba(0,0,0,.12),0 10px 26px rgba(42,120,228,.38)}
body.coinflip-page #coinflipApp .cfx-btn.join.t,body.coinflip-page #coinflipApp .cfx-cta.t{color:var(--p-t-ink);background:linear-gradient(180deg,#ffd89c 0%,var(--p-t) 45%,var(--p-t-2) 100%);box-shadow:inset 0 1px rgba(255,255,255,.6),inset 0 -2px rgba(0,0,0,.12),0 10px 26px rgba(229,120,28,.38)}
body.coinflip-page #coinflipApp .cfx-btn.join:hover:not(:disabled),body.coinflip-page #coinflipApp .cfx-cta:hover:not(:disabled){filter:brightness(1.08) saturate(1.05);transform:translateY(-1px)}

/* ---------- create / join ---------- */
body.coinflip-page #coinflipApp .cfx-wager{padding:20px;background:linear-gradient(180deg,rgba(32,46,72,.78),rgba(20,30,48,.74))}
body.coinflip-page #coinflipApp .cfx-wager-head h2{font-size:23px;font-weight:900;letter-spacing:-.035em;color:#fff}
body.coinflip-page #coinflipApp .cfx-kicker{color:var(--p-muted);font-size:12.5px;font-weight:650;letter-spacing:0;text-transform:none}
body.coinflip-page #coinflipApp .cfx-label,body.coinflip-page #coinflipApp .cfx-label em{color:var(--p-muted);font-weight:650}
body.coinflip-page #coinflipApp .cfx-sides{gap:10px}
body.coinflip-page #coinflipApp .cfx-side{position:relative;min-height:126px;overflow:hidden;border:1px solid var(--p-line-2);border-radius:16px;background:rgba(255,255,255,.05);color:var(--p-muted);transition:border-color .15s,background .15s,transform .15s}
body.coinflip-page #coinflipApp .cfx-side:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
body.coinflip-page #coinflipApp .cfx-side .cfx-side-coin img{width:50px;height:50px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}
body.coinflip-page #coinflipApp .cfx-side b{color:#fff;font-weight:800}
body.coinflip-page #coinflipApp .cfx-side.ct.active{border-color:var(--p-ct);background:radial-gradient(120% 100% at 50% 0%,rgba(95,176,255,.5),rgba(42,120,228,.18) 60%,rgba(20,40,80,.4));box-shadow:0 0 0 3px rgba(95,176,255,.18),0 12px 30px rgba(42,120,228,.3)}
body.coinflip-page #coinflipApp .cfx-side.t.active{border-color:var(--p-t);background:radial-gradient(120% 100% at 50% 0%,rgba(255,173,74,.5),rgba(229,120,28,.18) 60%,rgba(80,40,10,.4));box-shadow:0 0 0 3px rgba(255,173,74,.18),0 12px 30px rgba(229,120,28,.3)}
body.coinflip-page #coinflipApp .cfx-side.active small{color:#fff}
body.coinflip-page #coinflipApp .cfx-bot{border:1px solid var(--p-line);border-radius:14px;background:rgba(255,255,255,.05)}
body.coinflip-page #coinflipApp .cfx-bot small{color:var(--p-muted)}
body.coinflip-page #coinflipApp .cfx-bot.active{border-color:rgba(66,221,185,.5);background:rgba(66,221,185,.1)}
body.coinflip-page #coinflipApp .cfx-add-empty{border:1.5px dashed rgba(255,255,255,.22);border-radius:16px;background:rgba(255,255,255,.03);color:#fff}
body.coinflip-page #coinflipApp .cfx-add-empty small{color:var(--p-muted)}
body.coinflip-page #coinflipApp .cfx-add-empty:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
body.coinflip-page #coinflipApp .cfx-sum{border:1px solid var(--p-line);border-radius:14px;background:rgba(0,0,0,.18);overflow:hidden}
body.coinflip-page #coinflipApp .cfx-sum>div{border-color:var(--p-line)}
body.coinflip-page #coinflipApp .cfx-sum small{color:var(--p-muted)}
body.coinflip-page #coinflipApp .cfx-sum b{color:#fff;font-weight:850}
body.coinflip-page #coinflipApp .cfx-cta{height:54px;border-radius:14px;font-weight:850;font-size:15.5px}
body.coinflip-page #coinflipApp .cfx-cta b{background:rgba(0,0,0,.15);color:inherit;border-radius:8px}
body.coinflip-page #coinflipApp .cfx-cta:disabled{color:#9aa6b8;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--p-line);transform:none;filter:none}
body.coinflip-page #coinflipApp .cfx-cta:disabled b{background:rgba(255,255,255,.08)}

/* ---------- inventory ---------- */
body.coinflip-page #coinflipApp .cfx-inv{padding:20px}
body.coinflip-page #coinflipApp .cfx-inv-head h2{font-size:23px;font-weight:900;letter-spacing:-.035em;color:#fff}
body.coinflip-page #coinflipApp .cfx-inv-head p{color:var(--p-muted)}
body.coinflip-page #coinflipApp .cfx-worth{background:rgba(255,210,122,.14);color:var(--p-gold);border-radius:8px}
body.coinflip-page #coinflipApp .cf-inv-card{border:1px solid var(--p-line);border-radius:16px;background:radial-gradient(90% 70% at 50% 34%,color-mix(in srgb,var(--tier,#5d6a7e) 32%,transparent),transparent 72%),linear-gradient(180deg,rgba(34,48,74,.8),rgba(20,30,48,.85));transition:border-color .15s,transform .15s,box-shadow .15s}
body.coinflip-page #coinflipApp .cf-inv-card:hover{border-color:rgba(255,255,255,.28);transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.25)}
body.coinflip-page #coinflipApp .cf-inv-card[aria-pressed="true"],body.coinflip-page #coinflipApp .cf-inv-card.selected{border-color:var(--p-win);box-shadow:0 0 0 2px rgba(66,221,185,.35),0 10px 26px rgba(66,221,185,.15)}

/* ---------- watch / match ---------- */
.coinflip-page .cf-watch-overlay{background:rgba(6,10,18,.66);backdrop-filter:blur(10px) saturate(1.1)}
.coinflip-page .cf-watch-modal{width:min(1160px,100%);border:1px solid rgba(255,255,255,.14);border-radius:26px;
  background:radial-gradient(70% 90% at 0% 30%,rgba(55,135,255,.32),transparent 70%),radial-gradient(70% 90% at 100% 30%,rgba(255,150,50,.28),transparent 70%),linear-gradient(180deg,#1a2740,#111a2b);box-shadow:0 40px 120px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.1)}
.coinflip-page .cf-watch-header{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.08);background:transparent}
.coinflip-page .cf-watch-header strong{margin-right:auto;font-size:17px;font-weight:850;letter-spacing:-.02em}
.coinflip-page .cf-watch-header [data-cf-watch-close]{height:42px;padding:0 15px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;font-weight:750}
.coinflip-page .cf-watch-header [data-cf-watch-close]:hover{background:rgba(255,255,255,.12)}
.coinflip-page .cf-watch-modal .cfx-match{padding:18px 22px 24px;background:transparent}
.coinflip-page .cf-watch-modal .cfx-match-top h2{font-size:24px;font-weight:900;letter-spacing:-.035em}
.coinflip-page .cf-watch-modal .cfx-kicker{color:var(--p-muted,#aab5c7);text-transform:none;letter-spacing:0;font-weight:650}
.coinflip-page .cf-watch-modal .cfx-pot small{color:#aab5c7}
.coinflip-page .cf-watch-modal .cfx-pot b{font-size:30px;font-weight:900;color:#ffd27a;letter-spacing:-.04em;text-shadow:0 0 30px rgba(255,210,122,.25)}
.coinflip-page .cf-watch-modal .cfx-odds{height:8px;border-radius:8px;overflow:hidden;gap:3px;background:transparent}
.coinflip-page .cf-watch-modal .cfx-odds .ct{background:linear-gradient(90deg,#2a78e4,#5fb0ff);box-shadow:0 0 14px rgba(95,176,255,.5)}
.coinflip-page .cf-watch-modal .cfx-odds .t{background:linear-gradient(90deg,#ffad4a,#e5781c);box-shadow:0 0 14px rgba(255,173,74,.5)}
.coinflip-page .cf-watch-modal .cfx-match-stage{grid-template-columns:minmax(0,1fr) minmax(260px,330px) minmax(0,1fr);gap:16px;margin-top:18px}
.coinflip-page .cf-watch-modal .cfx-mp{--side:#5fb0ff;overflow:visible;min-height:340px;border:1px solid color-mix(in srgb,var(--side) 45%,transparent);border-radius:20px;
  background:radial-gradient(120% 70% at 50% 100%,color-mix(in srgb,var(--side) 34%,transparent),transparent 70%),linear-gradient(180deg,rgba(36,52,80,.75),rgba(18,27,44,.85));box-shadow:inset 0 1px rgba(255,255,255,.08)}
.coinflip-page .cf-watch-modal .cfx-mp.t{--side:#ffad4a}
.coinflip-page .cf-watch-modal .cfx-mp-art{opacity:.75;right:0;border-bottom-right-radius:20px}
.coinflip-page .cf-watch-modal .cfx-mp.t .cfx-mp-art{left:0;right:auto;border-radius:0 0 0 20px}
.coinflip-page .cf-watch-modal .cfx-mp-role{color:#c2ccda}
.coinflip-page .cf-watch-modal .cfx-mp-value{font-size:32px;font-weight:900;letter-spacing:-.04em}
.coinflip-page .cf-watch-modal .cfx-mp-chance{background:rgba(0,0,0,.35);color:#fff}
.coinflip-page .cf-watch-modal .cfx-mp.won{border-color:var(--side);box-shadow:0 0 0 2px var(--side),0 0 80px color-mix(in srgb,var(--side) 40%,transparent),inset 0 1px rgba(255,255,255,.1);animation:cfp-card-win .6s cubic-bezier(.2,1.3,.4,1) both}
.coinflip-page .cf-watch-modal .cfx-mp.lost{opacity:.4;filter:saturate(.3) brightness(.85)}
@keyframes cfp-card-win{from{transform:scale(.97)}to{transform:scale(1)}}
.coinflip-page .cf-watch-modal .cfx-mp-flag{top:-12px;right:16px;z-index:2;padding:4px 12px;background:var(--p-win,#42ddb9);color:var(--p-win-ink,#05241c);box-shadow:0 6px 16px rgba(66,221,185,.35)}
.coinflip-page .cf-watch-modal .cfx-mp.t .cfx-mp-flag{right:auto;left:16px}
.coinflip-page .cf-watch-modal .cfx-center{justify-content:flex-end;gap:8px;padding:0 0 6px}
.coinflip-page .cf-watch-modal .cfx-center>small{order:3;color:#aab5c7;font-size:13px}
.coinflip-page .cf-watch-modal .cfx-center>strong{order:4;font-size:19px;font-weight:850}
.coinflip-page .cf-watch-modal .cfx-center>span{order:5;color:#aab5c7}
.coinflip-page .cf-watch-modal .cfx-count-ring{width:156px;height:156px;margin-bottom:44px;background:radial-gradient(circle,#152036 60%,transparent 61%),conic-gradient(#5fb0ff 0 50%,#ffad4a 50% 100%);box-shadow:0 0 60px rgba(95,176,255,.25),0 0 60px rgba(255,173,74,.2)}
.coinflip-page .cf-watch-modal .cfx-result{border-radius:16px}
.coinflip-page .cf-watch-modal .cfx-result span{color:#c2ccda}

/* ---------- the win moment: the coin grows, pulses and throws light ---------- */
.cf-match-hero.resolved{--win:#5fb0ff}
.cf-match-hero.resolved.t{--win:#ffad4a}
.cf-match-hero.resolved .cfx-coin{position:relative;isolation:isolate}
.cf-match-hero.resolved .cfx-coin::before{content:"";position:absolute;left:50%;bottom:calc(18px + var(--cf-coin) / 2 + 15px);width:300px;height:300px;margin:0 0 -150px -150px;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--win) 70%,transparent) 38%,transparent 62%),repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--win) 55%,transparent) 0 6deg,transparent 6deg 22deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);
  opacity:0;animation:cfp-rays-in .7s .1s ease-out forwards,cfp-rays-spin 14s linear infinite}
.cf-match-hero.resolved .cfx-coin::after{content:"";position:absolute;left:50%;bottom:calc(18px + var(--cf-coin) / 2 + 15px);width:160px;height:160px;margin:0 0 -80px -80px;z-index:-1;border-radius:50%;border:3px solid var(--win);opacity:0;animation:cfp-shock 1.1s cubic-bezier(.15,.7,.3,1) 2}
.cf-match-hero.resolved .cfp-coin.cf-coin3d-scene{animation:cfp-pop .75s cubic-bezier(.2,1.5,.35,1) both,cfp-breathe 2.6s .75s ease-in-out infinite}
.cf-match-hero.resolved .cfp-coin .cf-coin-face{box-shadow:0 0 0 3px color-mix(in srgb,var(--win) 75%,transparent),inset 0 0 30px rgba(0,0,0,.5)!important}
@keyframes cfp-pop{0%{transform:scale(.92)}55%{transform:scale(1.32)}100%{transform:scale(1.18)}}
@keyframes cfp-breathe{0%,100%{transform:scale(1.18)}50%{transform:scale(1.24)}}
@keyframes cfp-rays-in{to{opacity:.9}}
@keyframes cfp-rays-spin{to{rotate:360deg}}
@keyframes cfp-shock{0%{transform:scale(.6);opacity:.95}100%{transform:scale(2.3);opacity:0}}

/* ---------- the coin ---------- */
.cfp-coin.cf-coin3d-scene{--cf-coin:116px;--cf-depth:calc(var(--cf-coin) * .085);position:relative;width:calc(var(--cf-coin) + 30px);height:calc(var(--cf-coin) + 30px);display:grid;place-items:center;perspective:1100px;perspective-origin:50% 40%;filter:none}
.cf-watch-modal .cfx-coin,#coinflipApp .cfx-coin{display:grid;place-items:end center;height:auto;transform:none}
.cf-watch-modal .cfx-coin{width:100%;height:270px;padding-bottom:18px}
.cf-watch-modal .cfx-coin{--cf-coin:136px;--cf-lift:86px}
.cf-watch-modal .cfp-coin.cf-coin3d-scene{--cf-coin:inherit;--cf-lift:inherit}
.cfp-coin .cf-coin-flight{display:grid;place-items:center;transform-style:preserve-3d;animation:none!important;will-change:transform}
.cfp-coin .cf-coin3d{position:relative;width:var(--cf-coin);height:var(--cf-coin);transform-style:preserve-3d;animation:none!important;will-change:transform;transition:none}
.cfp-coin .cf-coin3d.ready{transform:rotateX(0deg)}
.cfp-coin .cf-coin3d.spinning{animation:cfp-hover 1.6s ease-in-out infinite!important}
.cfp-coin .cf-coin3d.show-ct{transform:rotateX(0deg)}
.cfp-coin .cf-coin3d.show-t{transform:rotateX(180deg)}
@keyframes cfp-hover{0%,100%{transform:translateY(0) rotateY(-10deg) rotateX(6deg)}50%{transform:translateY(-8px) rotateY(10deg) rotateX(-6deg)}}
.cfp-coin .cf-coin-face{position:absolute;inset:0;z-index:2;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cfp-coin .cf-coin-face-ct{transform:translateZ(calc(var(--cf-depth) / 2))!important}
.cfp-coin .cf-coin-face-t{transform:rotateX(180deg) translateZ(calc(var(--cf-depth) / 2))!important}
.cfp-coin .cf-coin-face img{width:58%;height:58%}
.cfp-coin .cf-coin-rim{display:none}
.cfp-coin .cf-coin-edge{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.cfp-coin .cf-coin-edge i{position:absolute;left:50%;top:50%;width:calc(var(--cf-coin) * 3.1416 / 40 + 1.2px);height:var(--cf-depth);
  margin:calc(var(--cf-depth) / -2) 0 0 calc((var(--cf-coin) * 3.1416 / 40 + 1.2px) / -2);
  transform:rotateZ(var(--a)) translateY(calc(var(--cf-coin) / -2 + 1.5px)) rotateX(90deg);
  background:repeating-linear-gradient(90deg,#d8b468 0 1.4px,#8a6a2c 1.4px 2.6px);filter:brightness(var(--l,1));backface-visibility:visible}
.cfp-coin .cf-coin-shadow{position:absolute;left:50%;bottom:6px;width:calc(var(--cf-coin) * .8);height:14px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);animation:none!important;opacity:.85}
/* Glow goes on the wrapper: a filter on the coin itself would flatten its 3D faces. */
.cfp-coin .cf-coin3d,.cfp-coin .cf-coin-flight{filter:none!important}


/* ---------- responsive ---------- */
@media (max-width:1100px){
  body.coinflip-page #coinflipApp .cfx-top{grid-template-columns:minmax(0,1fr)}
  body.coinflip-page #coinflipApp .cfx-side-col{position:static}
}
@media (max-width:760px){
  .coinflip-page .cf-watch-modal .cfx-match-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .coinflip-page .cf-watch-modal .cfx-center{grid-column:1/-1;grid-row:1}
  .coinflip-page .cf-watch-modal .cfx-mp{min-height:200px}
  .cf-watch-modal .cfx-coin{height:240px}
  .cf-watch-modal .cfx-coin{--cf-coin:112px;--cf-lift:80px}
  body.coinflip-page #coinflipApp .cfx-head{flex-direction:column;align-items:stretch}
  body.coinflip-page #coinflipApp .cfx-stats{flex-wrap:wrap}
  body.coinflip-page #coinflipApp .cfx-stats>div{flex:1 1 120px;min-width:0}
  .cf-watch-header .cfp-sound span{display:none}
  .cf-watch-header .cfp-sound{padding:0 11px}
}
@media (prefers-reduced-motion:reduce){
  .cfp-coin .cf-coin3d.idle,  .cf-match-hero.resolved .cfp-coin.cf-coin3d-scene{animation:none;transform:scale(1.18)}
  .cf-match-hero.resolved .cfx-coin::before{animation:cfp-rays-in .3s forwards}
  .cf-match-hero.resolved .cfx-coin::after{display:none}
  body.coinflip-page #coinflipApp .cfx-game,body.coinflip-page #coinflipApp .cf-inv-card{transition:none}
}

/* ---------- provably fair ---------- */
.cfx-pot-wrap{display:flex;align-items:center;gap:14px}
.cfp-fair{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid rgba(66,221,185,.45);border-radius:12px;background:rgba(66,221,185,.12);color:#c9fbec;font:750 13.5px/1 Inter,system-ui,sans-serif;cursor:pointer;animation:cfp-fair-in .35s .25s ease-out both;transition:background .15s,color .15s}
.cfp-fair:hover{background:rgba(66,221,185,.22);color:#fff}
.cfp-fair svg{width:18px;height:18px;fill:rgba(66,221,185,.25);stroke:#42ddb9;stroke-width:1.7;stroke-linejoin:round}
.cfp-fair svg .c{fill:none;stroke-linecap:round}
@keyframes cfp-fair-in{from{opacity:0;transform:translateY(4px)}}
.cf-verify-overlay.over-watch{z-index:990}
.coinflip-page .cf-verify-modal{width:min(820px,100%);border-color:rgba(255,255,255,.14);background:linear-gradient(180deg,#1a2740,#111a2b);box-shadow:0 40px 120px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.1)}
.coinflip-page .cf-verify-title small,.coinflip-page .cf-verify-title span{color:#aab5c7}
.cfp-steps ol{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:s}
.cfp-steps li{position:relative;display:grid;gap:6px;padding:12px 14px 12px 50px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.04);counter-increment:s}
.cfp-steps li::before{content:counter(s);position:absolute;left:14px;top:12px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(66,221,185,.16);color:#7ff0d3;font-size:12.5px;font-weight:850}
.cfp-steps li b{color:#fff;font-size:14px;font-weight:750}
.cfp-steps li span,.cfp-steps li em{color:#aab5c7;font-size:12.5px;font-style:normal}
.cfp-steps code{display:block;overflow-wrap:anywhere;padding:8px 10px;border-radius:9px;background:rgba(0,0,0,.3);color:#dfe7f2;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cfp-steps code strong{color:#7ff0d3}
.cfp-steps mark{padding:0 2px;border-radius:3px;background:rgba(255,210,122,.25);color:#ffe2a6}
@media (max-width:560px){.cfx-pot-wrap{flex-direction:column-reverse;align-items:flex-end;gap:8px}.cfp-fair{height:34px;padding:0 11px;font-size:12.5px}}

/* ---------- background must show on the live site ----------
   The site paints a background on <html> and <body>; a body background sits above
   a z-index:-1 layer, so the page colour moves to <html> and <body> goes clear. */
html:has(body.coinflip-page){background:#0d1422!important}
body.coinflip-page{background:transparent!important}
body.coinflip-page::before{
  background:
    linear-gradient(90deg,rgba(35,105,215,.32) 0%,rgba(13,20,34,0) 30%,rgba(13,20,34,0) 70%,rgba(225,125,30,.28) 100%),
    linear-gradient(180deg,rgba(10,16,28,.05) 0%,rgba(10,16,28,.35) 50%,rgba(10,16,28,.7) 100%),
    url('/uploads/profile-modern/generated-bg-moonyard.png') center top/cover no-repeat,
    radial-gradient(120vw 80vh at 50% -10%,#1d2c46,#0d1422 70%)}

/* ---------- colour instead of grey ---------- */
body.coinflip-page #coinflipApp .cfx-games,body.coinflip-page #coinflipApp .cfx-inv{background:linear-gradient(180deg,rgba(34,54,92,.62),rgba(18,29,50,.72))}
body.coinflip-page #coinflipApp .cfx-seg,
body.coinflip-page #coinflipApp .cfx-vchips,body.coinflip-page #coinflipApp .cfx-gchips{background:rgba(95,176,255,.07);border-color:rgba(95,176,255,.2)}
body.coinflip-page #coinflipApp .cfx-seg::before,
body.coinflip-page #coinflipApp .cfx-gchips button[aria-pressed="true"],body.coinflip-page #coinflipApp .cfx-vchips button[aria-pressed="true"]{background:linear-gradient(180deg,#4c95ef,#2b67c7);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.3),0 6px 16px rgba(43,103,199,.35)}
body.coinflip-page #coinflipApp .cfx-seg button,body.coinflip-page #coinflipApp .cfx-gchips button,body.coinflip-page #coinflipApp .cfx-vchips button{color:#eaf2ff}
body.coinflip-page #coinflipApp .cfx-gchips button:hover:not([aria-pressed="true"]),body.coinflip-page #coinflipApp .cfx-vchips button:hover:not([aria-pressed="true"]){background:rgba(95,176,255,.14);color:#fff}
body.coinflip-page #coinflipApp .cfx-count{background:rgba(95,176,255,.18);color:#d7e9ff}
body.coinflip-page #coinflipApp [aria-pressed="true"] .cfx-count{background:rgba(255,255,255,.22);color:#fff}
body.coinflip-page #coinflipApp .cfx-gico.all i{background:#8fc4ff}
body.coinflip-page #coinflipApp [aria-pressed="true"] .cfx-gico.all i{background:#fff}
body.coinflip-page #coinflipApp .cfx-search,body.coinflip-page #coinflipApp .cf-live-select-trigger,body.coinflip-page #coinflipApp .cf-inv-select-trigger{background:rgba(95,176,255,.07);border-color:rgba(95,176,255,.22)}
body.coinflip-page #coinflipApp .cfx-search svg{stroke:#8fc4ff}
body.coinflip-page #coinflipApp .cfx-search input::placeholder{color:#93a6c2}
body.coinflip-page #coinflipApp .cfx-empty{border-color:rgba(95,176,255,.22);color:#d7e2f1}
body.coinflip-page #coinflipApp .cfx-btn.ghost{background:rgba(95,176,255,.1);border-color:rgba(95,176,255,.3);color:#eaf2ff}
body.coinflip-page #coinflipApp .cfx-btn.ghost:hover:not(:disabled){background:rgba(95,176,255,.2)}
body.coinflip-page #coinflipApp .cfx-stats>div{background:linear-gradient(180deg,rgba(34,54,92,.62),rgba(18,29,50,.72));border-color:rgba(95,176,255,.2)}

/* server-rendered start of the page (shown before the app loads, read by search engines) */
body.coinflip-page .cf-loading .cf-ssr-games{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
body.coinflip-page .cf-loading .cf-ssr-games a{padding:7px 12px;border:1px solid rgba(95,176,255,.25);border-radius:10px;background:rgba(95,176,255,.08);color:#eaf2ff;font-weight:700;text-decoration:none}
body.coinflip-page .cf-loading .cf-ssr-games a[aria-current="page"]{background:linear-gradient(180deg,#4c95ef,#2b67c7);color:#fff}
body.coinflip-page .sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

/* ---------- v5: darker backdrop, solid panels, calmer filters ---------- */
body.coinflip-page::before{
  background:
    linear-gradient(rgba(6,10,18,.3),rgba(6,10,18,.3)),
    linear-gradient(90deg,rgba(35,105,215,.26) 0%,rgba(13,20,34,0) 30%,rgba(13,20,34,0) 70%,rgba(225,125,30,.22) 100%),
    linear-gradient(180deg,rgba(10,16,28,.12) 0%,rgba(10,16,28,.45) 50%,rgba(10,16,28,.78) 100%),
    url('/uploads/profile-modern/generated-bg-moonyard.png') center top/cover no-repeat,
    radial-gradient(120vw 80vh at 50% -10%,#1d2c46,#0d1422 70%)}
/* panels read as solid surfaces on top of the scene */
body.coinflip-page #coinflipApp .cfx-games,body.coinflip-page #coinflipApp .cfx-inv{background:linear-gradient(180deg,rgba(19,28,45,.94),rgba(13,20,33,.95));border-color:rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.06)}
body.coinflip-page #coinflipApp .cfx-wager{background:linear-gradient(180deg,rgba(24,36,58,.95),rgba(15,23,38,.96));border-color:rgba(255,255,255,.13);box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.07)}
body.coinflip-page #coinflipApp .cfx-stats>div{background:rgba(15,23,38,.92);border-color:rgba(255,255,255,.12)}
body.coinflip-page #coinflipApp .cfx-game{background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--side) 18%,transparent),transparent 60%),linear-gradient(180deg,#1a2639,#131c2c)}
body.coinflip-page #coinflipApp .cf-inv-card{background:radial-gradient(90% 70% at 50% 34%,color-mix(in srgb,var(--tier,#5d6a7e) 26%,transparent),transparent 72%),linear-gradient(180deg,#1a2639,#131c2c)}

/* filters: plain tabs, one light chip for the current choice, counts as numbers */
body.coinflip-page #coinflipApp .cfx-seg,
body.coinflip-page #coinflipApp .cfx-vchips,body.coinflip-page #coinflipApp .cfx-gchips{gap:6px;padding:0;background:transparent;border:0;box-shadow:none}
body.coinflip-page #coinflipApp .cfx-seg{padding:3px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
body.coinflip-page #coinflipApp .cfx-seg::before{background:#e9eef6;box-shadow:none;border-radius:9px}
body.coinflip-page #coinflipApp .cfx-seg button{color:#c9d2de}
body.coinflip-page #coinflipApp .cfx-seg button[aria-pressed="true"]{color:#0c1524}
body.coinflip-page #coinflipApp .cfx-gchips button,body.coinflip-page #coinflipApp .cfx-vchips button{height:36px;padding:0 12px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:#d9e0ea;font-weight:650;transition:background .12s,color .12s,box-shadow .12s}
body.coinflip-page #coinflipApp .cfx-gchips button:hover:not([aria-pressed="true"]),body.coinflip-page #coinflipApp .cfx-vchips button:hover:not([aria-pressed="true"]){background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff}
body.coinflip-page #coinflipApp .cfx-gchips button[aria-pressed="true"],body.coinflip-page #coinflipApp .cfx-vchips button[aria-pressed="true"]{background:#e9eef6;color:#0c1524;box-shadow:none}
body.coinflip-page #coinflipApp .cfx-count,
body.coinflip-page #coinflipApp [aria-pressed="true"] .cfx-count{min-width:0;height:auto;padding:0;margin-left:2px;background:none!important;color:#8593a8;font-weight:600;font-variant-numeric:tabular-nums}
body.coinflip-page #coinflipApp [aria-pressed="true"] .cfx-count{color:#5b6779}
body.coinflip-page #coinflipApp .cfx-seg [aria-pressed="true"] .cfx-live-dot{box-shadow:none}
body.coinflip-page #coinflipApp .cfx-gico.all i{background:#9aa8bb}
body.coinflip-page #coinflipApp [aria-pressed="true"] .cfx-gico.all i{background:#0c1524}
body.coinflip-page #coinflipApp .cfx-search,body.coinflip-page #coinflipApp .cf-live-select-trigger,body.coinflip-page #coinflipApp .cf-inv-select-trigger{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
body.coinflip-page #coinflipApp .cfx-search svg{stroke:#9aa8bb}
body.coinflip-page #coinflipApp .cfx-btn.ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:#e9eef6}
body.coinflip-page #coinflipApp .cfx-btn.ghost:hover:not(:disabled){background:rgba(255,255,255,.1)}
