/* Market cards — layout/styling aligned with predict.html */

/* ======== CLASSIC EVENT CARD (ev-card) ======== */
.ev-card{
  background:var(--surface,#252836);border-radius:12px;transition:all .3s;cursor:pointer;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  box-shadow:0 1px 8px rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.03);
  padding:0;
}
.ev-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.35)}

.ev-card[data-cat="crypto"]{border-color:rgba(255,170,0,.1)}
.ev-card[data-cat="crypto"]:hover{border-color:rgba(255,170,0,.25);box-shadow:0 8px 28px rgba(255,170,0,.05)}
.ev-card[data-cat="sports"]{border-color:rgba(236,72,153,.1)}
.ev-card[data-cat="sports"]:hover{border-color:rgba(236,72,153,.25);box-shadow:0 8px 28px rgba(236,72,153,.05)}
.ev-card[data-cat="finance"]{border-color:rgba(74,144,217,.1)}
.ev-card[data-cat="finance"]:hover{border-color:rgba(74,144,217,.25);box-shadow:0 8px 28px rgba(74,144,217,.05)}
.ev-card[data-cat="news"]{border-color:rgba(15,185,177,.1)}
.ev-card[data-cat="news"]:hover{border-color:rgba(15,185,177,.25);box-shadow:0 8px 28px rgba(15,185,177,.05)}
.ev-card[data-cat="entertainment"]{border-color:rgba(232,67,147,.1)}
.ev-card[data-cat="entertainment"]:hover{border-color:rgba(232,67,147,.25);box-shadow:0 8px 28px rgba(232,67,147,.05)}
.ev-card[data-cat="science"]{border-color:rgba(136,84,208,.1)}
.ev-card[data-cat="science"]:hover{border-color:rgba(136,84,208,.25);box-shadow:0 8px 28px rgba(136,84,208,.05)}
.ev-card[data-cat="health"]{border-color:rgba(39,174,96,.1)}
.ev-card[data-cat="health"]:hover{border-color:rgba(39,174,96,.25);box-shadow:0 8px 28px rgba(39,174,96,.05)}
.ev-card[data-cat="lifestyle"]{border-color:rgba(255,215,0,.1)}
.ev-card[data-cat="lifestyle"]:hover{border-color:rgba(255,215,0,.25);box-shadow:0 8px 28px rgba(255,215,0,.05)}
.ev-card[data-cat="weather"]{border-color:rgba(56,189,248,.1)}
.ev-card[data-cat="weather"]:hover{border-color:rgba(56,189,248,.25);box-shadow:0 8px 28px rgba(56,189,248,.05)}
.ev-card[data-cat="flight"]{border-color:rgba(99,102,241,.1)}
.ev-card[data-cat="flight"]:hover{border-color:rgba(99,102,241,.25);box-shadow:0 8px 28px rgba(99,102,241,.05)}

.ev-banner{
  width:100%;height:90px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:18px;
  isolation:isolate;
}
.ev-banner .ev-banner-video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0}
.ev-banner .ev-banner-icons{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:18px}
.ev-banner.has-video .ev-banner-icons{display:none}
.ev-banner .banner-ico{font-size:1.8rem;opacity:.25;transition:opacity .3s;color:rgba(255,255,255,.7)}
.ev-card:hover .ev-banner .banner-ico{opacity:.4}
.ev-banner .banner-ico.center{font-size:2.4rem;opacity:.35}
.ev-card:hover .ev-banner .banner-ico.center{opacity:.5}
.ev-banner.crypto{background:linear-gradient(135deg,rgba(26,159,255,.7) 0%,rgba(0,212,255,.7) 50%,rgba(96,230,247,.5) 100%)}
.ev-banner.sports{background:linear-gradient(135deg,rgba(236,72,153,.65) 0%,rgba(244,114,182,.6) 50%,rgba(251,123,184,.45) 100%)}
.ev-banner.finance{background:linear-gradient(135deg,rgba(74,144,217,.7) 0%,rgba(99,102,241,.65) 50%,rgba(129,140,248,.45) 100%)}
.ev-banner.news{background:linear-gradient(135deg,rgba(15,185,177,.65) 0%,rgba(20,184,166,.6) 50%,rgba(94,234,212,.4) 100%)}
.ev-banner.entertainment{background:linear-gradient(135deg,rgba(232,67,147,.65) 0%,rgba(217,70,239,.6) 50%,rgba(168,85,247,.45) 100%)}
.ev-banner.science{background:linear-gradient(135deg,rgba(136,84,208,.65) 0%,rgba(168,85,247,.6) 50%,rgba(192,132,252,.4) 100%)}
.ev-banner.health{background:linear-gradient(135deg,rgba(39,174,96,.65) 0%,rgba(34,197,94,.6) 50%,rgba(74,222,128,.4) 100%)}
.ev-banner.lifestyle{background:linear-gradient(135deg,rgba(247,183,49,.65) 0%,rgba(251,191,36,.6) 50%,rgba(252,211,77,.4) 100%)}
.ev-banner.weather{background:linear-gradient(135deg,rgba(56,189,248,.65) 0%,rgba(103,232,249,.55) 50%,rgba(165,243,252,.4) 100%)}
.ev-banner.flight{background:linear-gradient(135deg,rgba(99,102,241,.65) 0%,rgba(129,140,248,.55) 50%,rgba(165,180,252,.4) 100%)}

.hot-badge{position:absolute;top:8px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:3px;font-size:.58rem;font-weight:700;padding:4px 10px;border-radius:5px;background:linear-gradient(135deg,rgba(255,51,102,.85),rgba(255,107,43,.85));color:#fff;text-transform:uppercase;box-shadow:0 2px 8px rgba(255,51,102,.2)}

.ev-body{padding:12px 16px 14px;display:flex;flex-direction:column;flex:1}
.ev-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ev-tag{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:3px}
.ev-tag i{font-size:.56rem}
.ev-tag.crypto{background:rgba(255,170,0,.07);color:rgba(255,170,0,.75)}
.ev-tag.sports{background:rgba(236,72,153,.07);color:rgba(236,72,153,.75)}
.ev-tag.finance{background:rgba(74,144,217,.07);color:rgba(74,144,217,.75)}
.ev-tag.news{background:rgba(15,185,177,.07);color:rgba(15,185,177,.75)}
.ev-tag.entertainment{background:rgba(232,67,147,.07);color:rgba(232,67,147,.75)}
.ev-tag.science{background:rgba(136,84,208,.07);color:rgba(136,84,208,.75)}
.ev-tag.health{background:rgba(39,174,96,.07);color:rgba(39,174,96,.75)}
.ev-tag.lifestyle{background:rgba(255,215,0,.07);color:rgba(255,215,0,.7)}
.ev-tag.weather{background:rgba(56,189,248,.07);color:rgba(56,189,248,.75)}
.ev-tag.flight{background:rgba(99,102,241,.07);color:rgba(129,140,248,.75)}

.ev-status{display:flex;align-items:center;gap:3px;font-size:.58rem;font-weight:600;padding:3px 7px;border-radius:4px}
.ev-status .dot{width:4px;height:4px;border-radius:50%}
.ev-status.live{color:rgba(0,255,136,.65);background:rgba(0,255,136,.05)}.ev-status.live .dot{background:rgba(0,255,136,.65);box-shadow:0 0 3px rgba(0,255,136,.3)}
.ev-status.hot{color:rgba(255,51,102,.65);background:rgba(255,51,102,.05)}.ev-status.hot .dot{background:rgba(255,51,102,.65)}
.ev-status.new{color:rgba(74,144,217,.65);background:rgba(74,144,217,.05)}.ev-status.new .dot{background:rgba(74,144,217,.65)}

.ev-title{font-size:.92rem;font-weight:700;line-height:1.45;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em;color:var(--text,#e0e0e0)}

.ev-finance{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ev-finance .ef-item{display:flex;align-items:center;gap:3px;font-size:.68rem;font-weight:600;color:var(--muted,#888)}
.ev-finance .ef-item i{font-size:.6rem;color:var(--light,#aaa)}
.ev-finance .ef-val{color:var(--text2,#e0e0e0);font-weight:700}
.ev-apy{font-size:.6rem;font-weight:700;padding:3px 7px;border-radius:6px;background:rgba(0,255,136,.1);color:rgba(0,255,136,.75);white-space:nowrap;margin-left:auto}

.ev-bets{display:flex;gap:8px;margin-bottom:10px}
.ev-bet-box{flex:1;border-radius:8px;overflow:hidden;text-align:center;cursor:pointer;transition:all .2s;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.015);position:relative}
.ev-bet-box:hover{transform:translateY(-1px)}
.ev-bet-box .bet-label{padding:5px 0;font-size:.68rem;font-weight:700}
.ev-bet-box.yes .bet-label{color:rgba(0,255,136,.7);background:rgba(0,255,136,.05)}
.ev-bet-box.no .bet-label{color:rgba(255,51,102,.7);background:rgba(255,51,102,.05)}
.ev-bet-box .bet-odds{font-size:1.08rem;font-weight:800;color:var(--text,#e0e0e0);padding:5px 0 2px}
.ev-bet-box .bet-count{font-size:.58rem;color:var(--light,#aaa);padding-bottom:5px}
.ev-bet-box.yes:hover{border-color:rgba(0,255,136,.2);background:rgba(0,255,136,.03)}
.ev-bet-box.no:hover{border-color:rgba(255,51,102,.2);background:rgba(255,51,102,.03)}

.ev-avatars{display:flex;align-items:center;gap:0;margin-bottom:10px;padding:0}
.ev-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;margin-left:-6px;border:1.5px solid var(--surface,#252836);position:relative;z-index:1;flex-shrink:0;background:rgba(255,255,255,.03);box-shadow:0 1px 4px rgba(0,0,0,.12);transition:transform .2s}
.ev-av:hover{transform:scale(1.15);z-index:5}
.ev-av:first-child{margin-left:0}
.ev-av-more{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:800;color:#fff;margin-left:-6px;border:1.5px solid var(--surface,#252836);flex-shrink:0;z-index:0;background:rgba(99,102,241,.15)}
.ev-av-count{font-size:.64rem;font-weight:700;color:var(--muted,#888);margin-left:8px;display:flex;align-items:center;gap:4px}
.ev-av-count i{font-size:.58rem;color:var(--light,#aaa)}

.ev-footer{display:flex;align-items:center;gap:6px;padding-top:8px;border-top:1px solid rgba(255,255,255,.04);margin-top:auto}
.ev-maker-av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.58rem;flex-shrink:0;border:1px solid rgba(255,255,255,.08);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.ev-maker-name{font-size:.64rem;font-weight:600;color:var(--text2,#e0e0e0)}
.ev-maker-badge{font-size:.52rem;font-weight:700;padding:2px 6px;border-radius:3px;background:rgba(255,51,102,.15);color:rgba(255,51,102,.75)}
.ev-maker-date{font-size:.58rem;color:var(--light,#aaa);margin-left:auto;display:flex;align-items:center;gap:3px}
.ev-maker-date i{font-size:.54rem}

/* ======== QUICK CARD (qk-card) ======== */
.qk-card{background:var(--surface,#252836);border-radius:14px;transition:all .3s;cursor:pointer;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.25);border:1.5px solid transparent;padding:0}
.qk-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.45)}
.qk-card .ev-banner{height:90px}
.qk-card .ev-body{padding:14px 16px 16px}
.qk-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.qk-timer{display:flex;align-items:center;gap:4px;font-size:.82rem;font-weight:900;color:var(--gold,#ffd700);padding:5px 12px;border-radius:8px;background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.15)}
.qk-timer i{font-size:.76rem}
.qk-timer.urgent{color:#ff3366;background:rgba(255,51,102,.1);border-color:rgba(255,51,102,.2);animation:pulseQ 1s infinite}
@keyframes pulseQ{0%,100%{opacity:1}50%{opacity:.55}}
.qk-title{font-size:.96rem;font-weight:800;margin-bottom:10px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qk-btns{display:flex;gap:8px;margin-bottom:10px}
.qk-btn{flex:1;padding:11px;font-size:.82rem;font-weight:800;border:none;border-radius:10px;cursor:pointer;transition:all .18s;font-family:inherit;text-align:center;position:relative;overflow:hidden}
.qk-btn.yes{background:linear-gradient(135deg,#00e676,#00c853);color:#0a0a0f}
.qk-btn.yes:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,230,118,.2)}
.qk-btn.no{background:linear-gradient(135deg,#ff3366,#e91e63);color:#fff}
.qk-btn.no:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 4px 14px rgba(255,51,102,.2)}
.qk-btn .qk-odds{display:block;font-size:.72rem;opacity:.85;margin-top:2px;font-weight:700}
.qk-finance{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--muted,#888);margin-bottom:10px;flex-wrap:wrap}
.qk-finance .ef-val{color:var(--gold,#ffd700);font-weight:700}
.qk-meta{display:flex;gap:10px;font-size:.72rem;color:var(--muted,#888);margin-top:auto;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.qk-meta .qm-pool{color:var(--gold,#ffd700);font-weight:700}

/* ======== DUEL CARD (dl-card) ======== */
.dl-card{background:var(--surface,#252836);border-radius:14px;transition:all .3s;cursor:pointer;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.25);border:1.5px solid transparent;padding:0}
.dl-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.45)}
.dl-card .ev-banner{height:80px}
.dl-card .ev-body{padding:14px 16px 16px}
.dl-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.dl-stake{font-size:.74rem;font-weight:700;color:var(--text2,#e0e0e0);display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;background:rgba(255,215,0,.04);border:1px solid rgba(255,215,0,.08)}
.dl-title{font-size:.96rem;font-weight:800;text-align:center;margin-bottom:10px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dl-versus{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 0;margin:0 0 12px;border-radius:12px;background:rgba(0,0,0,.15)}
.dl-player{text-align:center;flex:1;position:relative}
.dl-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;font-weight:900;margin:0 auto 6px;border:2px solid rgba(255,255,255,.15);box-shadow:0 4px 12px rgba(0,0,0,.3);transition:all .3s}
.dl-card:hover .dl-avatar{transform:scale(1.08);box-shadow:0 6px 16px rgba(0,0,0,.4)}
.dl-pname{font-size:.78rem;font-weight:700}
.dl-pside{font-size:.66rem;color:var(--muted,#888);margin-top:2px;padding:2px 8px;border-radius:4px;background:rgba(255,255,255,.04);display:inline-block}
.dl-vs{font-size:1.1rem;font-weight:800;color:var(--text2,#e0e0e0);padding:6px 14px;border-radius:50%;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);animation:vsPulse 2.5s ease-in-out infinite}
@keyframes vsPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(255,215,0,0)}50%{transform:scale(1.05);box-shadow:0 0 12px rgba(255,215,0,.08)}}
.dl-join{width:100%;padding:10px;font-size:.82rem;font-weight:800;border:2px solid var(--gold,#ffd700);border-radius:10px;background:rgba(255,215,0,.04);color:var(--gold,#ffd700);cursor:pointer;transition:all .22s;font-family:inherit;text-transform:uppercase;letter-spacing:.5px}
.dl-join:hover{background:linear-gradient(135deg,var(--gold,#ffd700),#ffaa00);color:#1a0a2e;transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,215,0,.2)}
.dl-join.full{border-color:var(--muted,#888);color:var(--muted,#888);cursor:default;background:var(--bg3,#1e1e2a)}
.dl-join.full:hover{transform:none;color:var(--muted,#888);background:var(--bg3,#1e1e2a);box-shadow:none}
.dl-meta{display:flex;justify-content:space-between;margin-top:10px;font-size:.72rem;color:var(--muted,#888);padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.dl-status-badge{font-size:.58rem;font-weight:700;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.4px}
.dl-status-badge.open{background:rgba(0,230,118,.06);color:rgba(0,255,136,.65);border:1px solid rgba(0,230,118,.12)}
.dl-status-badge.waiting{background:rgba(255,215,0,.06);color:rgba(255,215,0,.65);border:1px solid rgba(255,215,0,.12)}
.dl-status-badge.full{background:rgba(136,84,208,.06);color:rgba(168,85,247,.6);border:1px solid rgba(136,84,208,.12)}

/* ======== BUTTERFLY CARD (bf-card) ======== */
.bf-card{background:var(--surface,#252836);border-radius:12px;transition:all .3s;cursor:pointer;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 1px 8px rgba(0,0,0,.2);border:1px solid rgba(136,84,208,.1);padding:0}
.bf-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(136,84,208,.06);border-color:rgba(136,84,208,.2)}
.bf-banner{width:100%;height:70px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(135deg,rgba(15,185,177,.6) 0%,rgba(74,144,217,.55) 33%,rgba(136,84,208,.5) 66%,rgba(232,67,147,.45) 100%);isolation:isolate}
.bf-banner .ev-banner-video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0}
.bf-banner .ev-banner-icons{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:14px}
.bf-banner.has-video .ev-banner-icons{display:none}
.bf-banner .banner-ico{font-size:1.6rem;opacity:.25;color:rgba(255,255,255,.7);transition:opacity .3s}
.bf-card:hover .bf-banner .banner-ico{opacity:.4}
.bf-card .ev-body{padding:14px 16px 16px}
.bf-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.bf-tag{font-size:.62rem;font-weight:700;padding:3px 8px;border-radius:5px;background:rgba(136,84,208,.06);color:rgba(168,85,247,.6);text-transform:uppercase;letter-spacing:.4px;border:1px solid rgba(136,84,208,.08)}
.bf-mult{font-size:.82rem;font-weight:800;color:var(--text2,#e0e0e0);display:flex;align-items:center;gap:4px;padding:2px 8px;border-radius:5px;background:rgba(255,215,0,.04);border:1px solid rgba(255,215,0,.06)}
.bf-title{font-size:.96rem;font-weight:800;margin-bottom:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bf-chain{display:flex;flex-direction:column;gap:0;margin-bottom:12px;position:relative;padding:8px;border-radius:10px;background:rgba(0,0,0,.12)}
.bf-chain::before{content:'';position:absolute;left:22px;top:20px;bottom:20px;width:2px;background:linear-gradient(180deg,#0fb9b1,#4a90d9,#8854d0,#e84393);border-radius:1px}
.bf-step{display:flex;align-items:center;gap:10px;padding:6px 4px;position:relative;z-index:1;border-radius:8px;transition:background .2s}
.bf-step:hover{background:rgba(255,255,255,.03)}
.bf-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0;border:2px solid var(--surface,#252836);box-shadow:0 2px 8px rgba(0,0,0,.2);color:#fff}
.bf-step-info{flex:1}
.bf-step-title{font-size:.78rem;font-weight:700}
.bf-step-desc{font-size:.68rem;color:var(--muted,#888)}
.bf-step-odds{font-size:.74rem;font-weight:900;color:var(--gold,#ffd700);padding:2px 8px;border-radius:4px;background:rgba(255,215,0,.06)}
.bf-btns{display:flex;gap:8px}
.bf-invest{flex:1;padding:10px;font-size:.82rem;font-weight:800;border:none;border-radius:10px;cursor:pointer;transition:all .22s;font-family:inherit;background:linear-gradient(135deg,#8854d0,#e84393);color:#fff;text-transform:uppercase;letter-spacing:.5px}
.bf-invest:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(136,84,208,.3)}
.bf-detail-btn{padding:10px 16px;font-size:.78rem;font-weight:700;border:1.5px solid rgba(255,255,255,.1);border-radius:10px;background:transparent;cursor:pointer;font-family:inherit;color:var(--text,#e0e0e0);transition:all .22s}
.bf-detail-btn:hover{border-color:var(--gold,#ffd700);color:var(--gold,#ffd700)}
.bf-stats{display:flex;gap:14px;margin-top:10px;font-size:.72rem;color:var(--muted,#888);padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.bf-stats span{display:flex;align-items:center;gap:3px}