/* Duel Crypto Casino · static visual snapshot Design system rebuilt from duel.com (dark navy/indigo theme). */ /* Fonts are loaded via in each page for faster, non-chained delivery. */ :root { --bg: #080b16; --bg-2: #0b0f1f; --panel: #121830; --panel-2: #19203c; --panel-3: #222a49; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.14); --text: #ffffff; --muted: #8a90ab; --muted-2: #636a86; --primary: #5b63f5; --primary-hover: #6f76ff; --green: #1fae5a; --green-2: #14933f; --gold: #d9a13b; --red: #d8453a; --radius: 16px; --radius-sm: 12px; --maxw: 1200px; --nav-h: 64px; --tabbar-h: 68px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); min-height: 100vh; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3, .display { font-family: "Sora", "Inter", sans-serif; letter-spacing: -0.02em; margin: 0; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 18px; } /* ---------- Top header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; background: rgb(7, 11, 35); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { font-family: "Sora", sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -0.04em; color: #fff; } .header-nav { display: none; gap: 26px; margin-left: 34px; flex: 1; } .header-nav a { color: var(--muted); font-weight: 600; font-size: 15px; transition: color .15s; } .header-nav a:hover, .header-nav a.active { color: #fff; } .header-actions { display: flex; align-items: center; gap: 10px; } .btn { border: 0; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 12px; transition: transform .12s, background .15s, filter .15s; color: #fff; } .btn:active { transform: translateY(1px); } .btn-ghost { background: var(--panel-2); } .btn-ghost:hover { background: var(--panel-3); } .btn-primary { background: var(--primary); } .btn-primary:hover { background: var(--primary-hover); } .btn-block { width: 100%; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding: 72px 0 64px; min-height: 440px; display: flex; align-items: center; background: linear-gradient(180deg, #0c1126, var(--bg)); } .hero-inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; text-align: center; } .hero h1 { font-size: clamp(32px, 5.4vw, 56px); font-weight: 800; line-height: 1.06; } .hero p { color: var(--muted); font-size: clamp(15px, 2.2vw, 19px); margin: 20px auto 28px; max-width: 600px; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .hero-cta .btn { padding: 14px 26px; font-size: 16px; } .hero-art { position: absolute; inset: 0; z-index: 1; background-image: url(../img/hero-banner.png); background-size: cover; background-position: center 28%; background-repeat: no-repeat; pointer-events: none; } .hero-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 75% at 50% 48%, rgba(8,11,26,.78) 0%, rgba(8,11,26,.45) 45%, rgba(8,11,26,.12) 75%), linear-gradient(180deg, rgba(8,11,26,.45) 0%, transparent 26%, rgba(8,11,26,.55) 80%, var(--bg) 100%); } @media (max-width: 720px) { .hero-art::after { background: radial-gradient(95% 70% at 50% 46%, rgba(8,11,26,.8) 0%, rgba(8,11,26,.55) 55%, rgba(8,11,26,.4) 100%), linear-gradient(180deg, rgba(8,11,26,.5) 0%, transparent 30%, rgba(8,11,26,.7) 78%, var(--bg) 100%); } } /* ---------- Sections ---------- */ .section { padding: 30px 0; } .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .section-title { display: flex; align-items: center; gap: 10px; font-family: "Sora", sans-serif; font-weight: 700; font-size: clamp(20px, 3.4vw, 26px); } .section-title .ico { font-size: 22px; opacity: .9; } .view-all { background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: 14px; padding: 8px 16px; border-radius: 10px; } .view-all:hover { color: #fff; background: var(--panel-3); } .section-head.centered { justify-content: center; position: relative; } .section-head.centered .section-title { justify-content: center; } .section-head.centered .view-all { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } @media (max-width: 560px) { .section-head.centered .view-all { position: static; transform: none; margin-top: 10px; } .section-head.centered { flex-direction: column; gap: 8px; } } .script-label { font-family: "Sora", sans-serif; font-style: italic; font-weight: 700; font-size: clamp(22px, 4vw, 30px); color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.6); margin: 4px 0 16px; text-align: center; } /* ---------- Game grids ---------- */ .grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .grid > .card { flex: 0 1 calc((100% - 14px) / 2); min-width: 0; } @media (min-width: 560px) { .grid > .card { flex: 0 1 calc((100% - 28px) / 3); } } @media (min-width: 820px) { .grid > .card { flex: 0 1 calc((100% - 42px) / 4); } } @media (min-width: 1040px) { .grid > .card { flex: 0 1 calc((100% - 70px) / 6); } } .row { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .row::-webkit-scrollbar { height: 6px; } .row::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 6px; } @media (min-width: 560px) { .row { grid-auto-columns: 30%; } } @media (min-width: 820px) { .row { grid-auto-columns: 22%; } } @media (min-width: 1040px) { .row { grid-auto-columns: 16.2%; } } .row .card { scroll-snap-align: start; } .card { position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer; border: 1px solid var(--border); transition: transform .15s, box-shadow .15s; background: var(--panel); } .card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.45); } .card .thumb { aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; position: relative; } .card .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.62)); } .card .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .card .thumb.plain::after { display: none; } .card .glyph { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); font-size: 46px; opacity: .9; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); } .card .meta { position: relative; z-index: 2; } .card.nolabel .thumb::after { display: none; } .card.nolabel .meta { display: none; } .card .name { font-family: "Sora", sans-serif; font-weight: 700; font-size: 15px; line-height: 1.15; } .card .sub { font-size: 12px; color: rgba(255,255,255,.66); margin-top: 2px; } .badge { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 8px; background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.18); color: #fff; } .badge.rtp { background: linear-gradient(135deg, var(--green), var(--green-2)); border: 0; } .badge.beta { background: var(--gold); color: #1a1404; } /* ---------- Casino tabs / search ---------- */ .subnav { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 14px; scrollbar-width: none; } .subnav::-webkit-scrollbar { display: none; } .chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); color: var(--muted); font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 12px; cursor: pointer; } .chip.active { color: #fff; background: var(--panel-3); border-color: var(--border-strong); } .search { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; color: var(--muted); margin-bottom: 8px; } .search input { flex: 1; background: transparent; border: 0; outline: none; color: #fff; font-family: inherit; font-size: 15px; } /* ---------- Sports ---------- */ .sb-iconbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-top: 14px; color: var(--muted); overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; } .sb-iconbar .ico { font-size: 16px; cursor: pointer; padding: 7px 12px; border-radius: 10px; white-space: nowrap; transition: background .15s, color .15s; } .sb-iconbar .ico:hover { color: #fff; background: var(--panel-3); } .sb-iconbar .ico.active { color: #fff; background: var(--primary); } .match-row { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; } @media (min-width: 720px) { .match-row { grid-auto-columns: 46%; } } @media (min-width: 760px) { .match-row { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; padding-bottom: 0; } } .match { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; scroll-snap-align: start; overflow: hidden; transition: border-color .18s, transform .18s; } .match .odds { margin-top: auto; } .live-event { display: flex; flex-direction: column; } .live-event .odds { margin-top: auto; } .match:hover { border-color: var(--primary); transform: translateY(-3px); } .match .league { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 14px; } .match .live { color: #ff5b5b; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .match .live::before, .live-event .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff5b5b; display: inline-block; box-shadow: 0 0 0 0 rgba(255,91,91,.6); animation: livePulse 1.6s infinite; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255,91,91,.55); } 70% { box-shadow: 0 0 0 7px rgba(255,91,91,0); } 100% { box-shadow: 0 0 0 0 rgba(255,91,91,0); } } .match .teams { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .match .team { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; } .match .team .logo { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 18px; background: var(--panel-3); } .match .score { background: var(--panel-3); border-radius: 9px; min-width: 34px; height: 34px; display: grid; place-items: center; font-weight: 700; } .match .winner-label { text-align: center; color: var(--muted); font-size: 12px; margin: 14px 0 8px; } .odds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .odds.three { grid-template-columns: repeat(3, 1fr); } .odd { background: var(--panel-3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; } .odd:hover { border-color: var(--primary); background: rgba(124,92,255,.12); } .odd:active { transform: scale(.97); } .odd .k { color: var(--muted); } .odd .v { font-weight: 700; color: #fff; } .live-list { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 760px) { .live-list { display: grid; grid-template-columns: repeat(3, 1fr); } } .live-event { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; transition: border-color .18s, transform .18s; } .live-event:hover { border-color: var(--primary); transform: translateY(-3px); } .live-event .top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 10px; } .live-event .top .live { color: #ff5b5b; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .live-event .ev-team { display: flex; justify-content: space-between; font-weight: 600; padding: 4px 0; } .live-event .ev-team .num { color: #fff; font-weight: 700; } /* inline svg icons */ .i { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .sb-iconbar .i { width: 20px; height: 20px; } .sb-iconbar .ico { display: inline-flex; align-items: center; gap: 7px; } .sb-sep { width: 1px; height: 20px; background: var(--border-strong); flex: none; margin: 0 2px; } .subnav .chip .i { width: 16px; height: 16px; margin-right: 2px; } .chip { display: inline-flex; align-items: center; } .league .i { width: 15px; height: 15px; vertical-align: -0.16em; margin-right: 3px; color: var(--muted); } .live-event .top .i { width: 15px; height: 15px; vertical-align: -0.16em; margin-right: 3px; } .section-title .ico { display: inline-flex; align-items: center; opacity: 1; } .section-title .ico .i { width: 26px; height: 26px; } .section-title .ico.flame .i { color: #ff8a3c; } .section-title .ico.live .i { color: #ff5b5b; } .section > .section-title { margin-bottom: 16px; } /* ---------- High scores ---------- */ .section-title .ico.trophy .i { color: #ffce4d; } .scores-tabs .chip .i { color: var(--muted); } .scores-tabs .chip.active .i { color: #fff; } .hs-podium { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; } @media (min-width: 760px) { .hs-podium { grid-template-columns: 1fr 1.15fr 1fr; align-items: end; } } .hs-card { position: relative; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 16px; text-align: center; overflow: hidden; } .hs-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--border-strong); } .hs-card.rank-1 { border-color: rgba(255,206,77,.5); } .hs-card.rank-1::before { background: linear-gradient(90deg, #ffce4d, #ff8a3c); } .hs-card.rank-2::before { background: linear-gradient(90deg, #c8d0e0, #8b93a8); } .hs-card.rank-3::before { background: linear-gradient(90deg, #e0a36b, #a96b34); } @media (min-width: 760px) { .hs-card.rank-1 { padding-top: 26px; padding-bottom: 26px; } .hs-card.rank-1 .hs-payout { font-size: 22px; } } .hs-rank { display: inline-flex; align-items: center; gap: 6px; font-family: "Sora", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .hs-card.rank-1 .hs-rank { color: #ffce4d; } .hs-card.rank-1 .hs-rank .i { color: #ffce4d; } .hs-card.rank-2 .hs-rank .i { color: #c8d0e0; } .hs-card.rank-3 .hs-rank .i { color: #e0a36b; } .hs-rank .i { width: 18px; height: 18px; } .hs-game { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 6px; } .hs-game .g-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; } .hs-player { color: var(--muted); font-size: 13px; margin-bottom: 10px; } .hs-payout { font-family: "Sora", sans-serif; font-weight: 800; font-size: 19px; } .hs-mult { color: var(--green); font-weight: 700; font-size: 14px; margin-top: 4px; } .hs-stats { margin-bottom: 24px; } .scores-tabs { margin: 8px 0 18px; } .score-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .score-table th, .score-table td { text-align: left; padding: 14px 16px; font-size: 14px; border-bottom: 1px solid var(--border); white-space: nowrap; } .score-table th { color: var(--muted); font-weight: 600; background: var(--bg-2); } .score-table tr:last-child td { border-bottom: 0; } .score-table .game-cell { display: flex; align-items: center; gap: 10px; font-weight: 600; } .score-table .g-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; } .mult { font-weight: 700; color: var(--green); } .payout { font-weight: 700; } .muted-cell { color: var(--muted); } .table-scroll { overflow-x: auto; } /* ---------- Review prose ---------- */ .review { max-width: 100%; margin: 0; } .review h2 { font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(24px, 4.5vw, 34px); letter-spacing: -0.02em; } .review .lead { color: var(--muted); font-size: clamp(15px, 2.4vw, 18px); line-height: 1.65; margin: 14px 0 26px; } .review h3 { font-family: "Sora", sans-serif; font-weight: 700; font-size: clamp(18px, 3vw, 22px); margin: 28px 0 10px; } /* legal/content sub-headings promoted from h3 to h2 keep the h3 visual scale */ .review h2.rsub { font-weight: 700; font-size: clamp(18px, 3vw, 22px); margin: 28px 0 10px; } .review p { color: #c2c7dc; line-height: 1.7; font-size: 15.5px; margin: 0 0 14px; } .review p strong { color: #fff; font-weight: 600; } .review .accent { color: #8b93ff; font-weight: 600; } .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 8px 0 8px; } @media (min-width: 720px) { .facts { grid-template-columns: repeat(4, 1fr); } } .fact { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px 16px 18px; overflow: hidden; } .fact::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--primary-hover), var(--primary)); } .fact .num { font-family: "Sora", sans-serif; font-weight: 800; font-size: 22px; line-height: 1.1; } .fact .lbl { margin-top: 6px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .review .verdict { margin-top: 26px; background: linear-gradient(180deg, rgba(91,99,245,.10), rgba(91,99,245,.02)); border: 1px solid rgba(91,99,245,.28); border-radius: 16px; padding: 20px 22px; } .review .verdict h3 { margin-top: 0; } .review .disclaimer { margin-top: 18px; font-size: 12.5px; color: #9aa1c2; line-height: 1.6; } .review ul.ticks { list-style: none; padding: 0; margin: 0 0 14px; } .review ul.ticks li { position: relative; padding: 6px 0 6px 26px; color: #c2c7dc; line-height: 1.6; } .review ul.ticks li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 10px; height: 6px; border-left: 2px solid #5ad17e; border-bottom: 2px solid #5ad17e; transform: rotate(-45deg); } /* numbered how-to guide */ .review ol.guide-steps { list-style: none; counter-reset: gs; padding: 0; margin: 4px 0 16px; display: grid; gap: 10px; } .review ol.guide-steps li { counter-increment: gs; position: relative; padding: 14px 16px 14px 56px; color: #c2c7dc; line-height: 1.6; font-size: 15px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; } .review ol.guide-steps li::before { content: counter(gs); position: absolute; left: 14px; top: 13px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(91,99,245,.16); color: #fff; font-family: "Sora", sans-serif; font-weight: 700; font-size: 14px; } .review ol.guide-steps li strong { color: #fff; font-weight: 600; } /* crypto tables */ .crypto-table-wrap { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin: 12px 0 8px; background: var(--panel); } .crypto-table-wrap .table-scroll { overflow-x: auto; } table.crypto { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; } table.crypto th, table.crypto td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; } table.crypto thead th { background: var(--bg-2); color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; } table.crypto tbody tr:last-child td { border-bottom: 0; } table.crypto tbody tr:hover td { background: rgba(255,255,255,.02); } table.crypto tbody th { font-weight: 500; color: var(--text); } table.crypto td.green { color: #5ad17e; font-weight: 600; } .coin { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; } .coin .tick { color: var(--muted); font-weight: 500; } .coin svg { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; } /* pros & cons */ .proscons { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 8px 0 4px; } @media (min-width: 680px) { .proscons { grid-template-columns: 1fr 1fr; } } .pc-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px 18px; background: var(--panel); } .pc-card h4 { margin: 0 0 10px; font-family: "Sora", sans-serif; font-size: 15px; } .pc-card.pros { border-color: rgba(63,185,80,.26); } .pc-card.cons { border-color: rgba(216,69,58,.26); } .pc-card ul { list-style: none; margin: 0; padding: 0; } .pc-card li { position: relative; padding: 6px 0 6px 24px; font-size: 14px; color: #c2c7dc; line-height: 1.55; } .pc-card.pros li::before { content: "+"; position: absolute; left: 4px; color: #5ad17e; font-weight: 800; } .pc-card.cons li::before { content: "−"; position: absolute; left: 4px; color: #ff6b60; font-weight: 800; } /* FAQ accordion */ .faq { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; } .faq details { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; } .faq summary { list-style: none; cursor: pointer; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-family: "Sora", sans-serif; font-weight: 600; font-size: 15px; color: #fff; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; flex-shrink: 0; } .faq details[open] summary::after { transform: rotate(-135deg); } .faq details p { margin: 0; padding: 0 18px 16px; color: #b3b8cf; line-height: 1.65; font-size: 14.5px; } /* ---------- Originals page ---------- */ .orig-hero { position: relative; text-align: center; padding: 66px 0 38px; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, rgba(91,99,245,.22), transparent 60%), radial-gradient(90% 80% at 85% 20%, rgba(31,174,90,.14), transparent 55%), linear-gradient(180deg, #0c1126, var(--bg)); } .orig-hero .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--primary-hover); background: rgba(91,99,245,.12); border: 1px solid rgba(91,99,245,.3); padding: 6px 14px; border-radius: 999px; } .orig-hero h1 { font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(34px, 6vw, 60px); margin: 18px 0 0; line-height: 1.05; } .orig-hero h1 .accent { background: linear-gradient(135deg, #8a78ff, #3fb968); -webkit-background-clip: text; background-clip: text; color: transparent; } .orig-hero p { color: var(--muted); max-width: 660px; margin: 16px auto 0; font-size: clamp(15px, 2.2vw, 19px); line-height: 1.65; } .orig-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 760px; margin: 32px auto 0; } @media (min-width: 680px) { .orig-stats { grid-template-columns: repeat(4, 1fr); } } .orig-stat { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); padding: 16px 12px; text-align: center; } .orig-stat .n { font-family: "Sora", sans-serif; font-weight: 800; font-size: 24px; background: linear-gradient(135deg, #fff, #9aa0c0); -webkit-background-clip: text; background-clip: text; color: transparent; } .orig-stat .l { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; margin-top: 5px; } .orig-showcase { display: flex; flex-direction: column; gap: 24px; padding: 22px 0 6px; } .orig-row { display: grid; grid-template-columns: 1fr; align-items: stretch; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, var(--panel-2), var(--panel)); transition: border-color .2s, transform .2s; } .orig-row:hover { border-color: rgba(91,99,245,.4); transform: translateY(-2px); } .orig-row { align-items: stretch; min-height: 280px; } @media (min-width: 820px) { .orig-row { grid-template-columns: 300px 1fr; min-height: 300px; } } .orig-media { position: relative; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.18); } .orig-media img { height: 240px; width: auto; max-width: 100%; object-fit: contain; display: block; border-radius: 12px; } .orig-media .num { display: none; } .orig-body { padding: 26px 32px; align-self: center; } .orig-body .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .orig-body h2 { font-family: "Sora", sans-serif; font-size: clamp(22px, 3vw, 30px); margin: 8px 0 10px; color: #fff; } .orig-body p { color: #c2c7dc; line-height: 1.7; margin: 0 0 16px; font-size: 14.5px; } .orig-tags { display: flex; flex-wrap: wrap; gap: 8px; } .orig-tag { font-size: 12px; font-weight: 600; color: #d7dbec; background: rgba(255,255,255,.05); border: 1px solid var(--border); padding: 6px 11px; border-radius: 999px; } .orig-tag.rtp { color: #bff3d2; background: rgba(31,174,90,.14); border-color: rgba(31,174,90,.34); } .orig-fair { border: 1px solid var(--border); border-radius: 18px; background: radial-gradient(120% 120% at 0% 0%, rgba(91,99,245,.12), transparent 55%), linear-gradient(180deg, var(--panel-2), var(--panel)); padding: 26px 24px; margin-top: 26px; } .orig-fair h2 { font-family: "Sora", sans-serif; font-size: clamp(22px, 3.4vw, 30px); margin: 0 0 8px; text-align: center; } .orig-fair > p { color: var(--muted); text-align: center; max-width: 620px; margin: 0 auto 20px; line-height: 1.6; } .orig-fair-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 700px) { .orig-fair-grid { grid-template-columns: repeat(3, 1fr); } } .orig-fair-card { border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.02); padding: 18px; } .orig-fair-card .ic { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 15px; background: linear-gradient(135deg, rgba(138,120,255,.18), rgba(63,185,104,.12)); border: 1px solid var(--border); } .orig-fair-card .ic svg { width: 30px; height: 30px; display: block; } .orig-fair-card h3 { font-family: "Sora", sans-serif; font-size: 16px; margin: 10px 0 6px; color: #fff; } .orig-fair-card p { color: #b3b8cf; font-size: 13.5px; line-height: 1.6; margin: 0; } .orig-cta { text-align: center; padding: 34px 0 12px; } .orig-cta h2 { font-family: "Sora", sans-serif; font-size: clamp(24px, 4vw, 36px); margin: 0 0 10px; } .orig-cta p { color: var(--muted); max-width: 540px; margin: 0 auto 20px; line-height: 1.6; } /* ---------- Founder block ---------- */ .founder { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: radial-gradient(120% 120% at 100% 0%, rgba(91,99,245,.16), transparent 55%), radial-gradient(120% 120% at 0% 100%, rgba(122,84,224,.14), transparent 55%), linear-gradient(180deg, var(--panel-2), var(--panel)); } .founder-photo { position: relative; min-height: 280px; } .founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .founder-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--panel) 100%); pointer-events: none; } .founder-info { padding: 22px 22px 26px; } .founder-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-hover); background: rgba(91,99,245,.12); border: 1px solid rgba(91,99,245,.3); padding: 5px 11px; border-radius: 999px; } .founder-info h4 { font-family: "Sora", sans-serif; font-size: 26px; margin: 14px 0 4px; color: #fff; } .founder-role { color: var(--muted); font-size: 14px; margin: 0 0 14px; font-weight: 600; } .founder-info p { color: #c2c7dc; line-height: 1.7; margin: 0 0 12px; font-size: 14.5px; } .founder-tags { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; } .founder-tags li { font-size: 12.5px; font-weight: 600; color: #d7dbec; background: rgba(255,255,255,.05); border: 1px solid var(--border); padding: 7px 12px; border-radius: 999px; } @media (min-width: 620px) { .founder { grid-template-columns: 240px 1fr; } .founder-photo { min-height: 100%; } .founder-photo::after { background: linear-gradient(90deg, transparent 60%, var(--panel) 100%); } .founder-info { padding: 28px 30px; align-self: center; } } /* ---------- Review TOC ---------- */ html { scroll-behavior: smooth; } .review h2[id], .review h3[id] { scroll-margin-top: 84px; } .section[id] { scroll-margin-top: 84px; } a.chip { text-decoration: none; } .providers-shot { margin: 4px 0 22px; } .providers-shot img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--border); background: #11131f; } .providers-shot figcaption { margin-top: 8px; font-size: 13px; color: #8b90a8; text-align: center; } .mobile-shot { margin: 26px 0 10px; display: flex; justify-content: center; position: relative; } .mobile-shot::before { content: ""; position: absolute; top: 8%; width: min(360px, 70%); height: 80%; background: radial-gradient(closest-side, rgba(124,92,255,.30), rgba(124,92,255,0) 72%); filter: blur(18px); z-index: 0; } .mobile-shot img { position: relative; z-index: 1; width: auto; max-width: 100%; max-height: 560px; height: auto; display: block; filter: drop-shadow(0 26px 50px rgba(0,0,0,.55)); } .review .review-grid { display: block; } .review-toc { margin: 0 0 22px; } .toc { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); overflow: hidden; } .toc summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: "Sora", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .toc summary::-webkit-details-marker { display: none; } .toc summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; flex-shrink: 0; } .toc[open] summary::after { transform: rotate(-135deg); } .toc nav { display: flex; flex-direction: column; padding: 4px 8px 10px; } .toc nav a { color: #b9bed4; text-decoration: none; font-size: 14px; line-height: 1.3; padding: 8px 10px; border-radius: 8px; border-left: 2px solid transparent; transition: background .15s, color .15s, border-color .15s; } .toc nav a:hover { background: rgba(255,255,255,.04); color: #fff; } .toc nav a.active { color: #fff; background: rgba(91,99,245,.14); border-left-color: var(--primary); } @media (min-width: 980px) { .review .review-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 40px; align-items: start; } .review-main { grid-column: 1; grid-row: 1; min-width: 0; } .review-toc { grid-column: 2; grid-row: 1; margin: 0; position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 104px); overflow-y: auto; } .toc summary { cursor: default; } .toc summary::after { display: none; } .toc nav { display: flex !important; } } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-2); margin-top: 30px; padding: 40px 0 30px; } .footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 16px; } @media (min-width: 720px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } } .footer-cols h4, .footer-cols .footer-h { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 12px; font-weight: 600; } .footer-cols a { display: block; color: #c7cbdd; font-size: 14px; padding: 6px 0; } .footer-cols a:hover { color: #fff; } .footer-social { display: flex; flex-direction: column; gap: 10px; } .footer-social a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: #c7cbdd; font-size: 14px; font-weight: 600; transition: border-color .15s, color .15s, background .15s; } .footer-social a:hover { color: #fff; border-color: var(--border-strong); background: var(--panel-3); } .footer-social a svg { width: 20px; height: 20px; flex: none; } .footer-social a.discord:hover { border-color: #5865F2; } .footer-social a.telegram:hover { border-color: #2AABEE; } .footer-legal { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 18px; } @media (min-width: 760px) { .footer-legal { flex-direction: row; align-items: flex-start; gap: 28px; } } .footer-legal .seal { flex: none; display: inline-block; line-height: 0; transition: transform .15s, opacity .15s; } .footer-legal .seal:hover { transform: translateY(-2px); opacity: .9; } .footer-legal .seal img { width: 96px; height: auto; display: block; } .footer-legal .legal-text { color: var(--muted); font-size: 12.5px; line-height: 1.7; margin: 0; } .footer-legal .legal-text a { color: #a7adff; text-decoration: underline; } .footer-legal .legal-text a:hover { color: #b9bed4; } .footer-bottom { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; } /* ---------- Bottom tab bar ---------- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; background: rgba(10, 13, 26, 0.96); backdrop-filter: blur(14px); border-top: 1px solid var(--border); } .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 600; position: relative; } .pop-note { margin: 22px auto 0; max-width: 760px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.7; } .tabbar a .ico { font-size: 20px; display: inline-flex; width: 23px; height: 23px; } .tabbar a .ico svg { width: 100%; height: 100%; display: block; } .tabbar a.active { color: #fff; } .tabbar a.active::after { content: ""; position: absolute; bottom: 8px; width: 20px; height: 3px; border-radius: 3px; background: var(--primary); } @media (min-width: 900px) { body { padding-bottom: 0; } .tabbar { display: none; } .header-nav { display: flex; } } /* sports banner slider */ .sb-slider { position: relative; margin: 12px 0 6px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #0e1020; } .sb-track { display: flex; transition: transform .5s cubic-bezier(.4,.0,.2,1); } .sb-slide { flex: 0 0 100%; display: block; line-height: 0; } .sb-slide img { width: 100%; height: auto; display: block; } .sb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(10,12,26,.55); backdrop-filter: blur(6px); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s, opacity .15s; z-index: 2; } .sb-arrow:hover { background: rgba(10,12,26,.85); } .sb-arrow.prev { left: 12px; } .sb-arrow.next { right: 12px; } .sb-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 2; } .sb-dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: none; background: rgba(255,255,255,.4); cursor: pointer; transition: width .2s, background .2s; } .sb-dots button.active { width: 22px; border-radius: 4px; background: #fff; } @media (max-width: 600px) { .sb-arrow { width: 32px; height: 32px; font-size: 18px; } .sb-arrow.prev { left: 8px; } .sb-arrow.next { right: 8px; } } /* page header */ /* breadcrumbs */ .breadcrumbs { padding: 18px 0 0; } .breadcrumbs ol { list-style: none; margin: 0; padding: 7px 14px; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 999px; font-size: 13.5px; } .breadcrumbs li { display: inline-flex; align-items: center; color: var(--muted); } .breadcrumbs li.sep { color: var(--muted-2); } .breadcrumbs li.sep svg { display: block; } .breadcrumbs a { color: var(--muted); text-decoration: none; transition: color 0.15s ease; } .breadcrumbs a:hover { color: var(--text); } .breadcrumbs li[aria-current="page"] span { color: var(--text); font-weight: 600; } .page-head { padding: 18px 0 6px; } .page-head h1 { font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(28px, 5vw, 42px); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 10px; } .page-head h1 .accent { color: var(--primary); } .page-head p { margin: 0; max-width: 720px; color: var(--muted); font-size: clamp(15px, 2.2vw, 17px); line-height: 1.6; } /* utility */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .spacer-sm { height: 8px; } /* Internal interlinking: "Explore more of Duel" cards */ .related { padding: 30px 0 44px; border-top: 1px solid var(--border); margin-top: 30px; } .related .container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .related-head { text-align: center; margin-bottom: 22px; } .related-head h2 { font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(21px, 3vw, 28px); margin: 0 0 8px; color: #fff; } .related-head p { color: var(--muted); margin: 0 auto; max-width: 560px; font-size: 14.5px; line-height: 1.55; } .related-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 820px) { .related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .related-card { display: flex; flex-direction: column; gap: 11px; padding: 18px 18px 17px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel), var(--bg-2)); text-decoration: none; color: inherit; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; position: relative; overflow: hidden; } .related-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--primary), transparent); opacity: 0; transition: opacity .18s ease; } .related-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 18px 38px rgba(0,0,0,.42); } .related-card:hover::after { opacity: 1; } .related-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(91,99,245,.14); border: 1px solid rgba(91,99,245,.3); color: var(--primary-hover); } .related-ico svg { width: 21px; height: 21px; } .related-name { font-family: "Sora", sans-serif; font-weight: 700; font-size: 15.5px; color: #fff; } .related-desc { font-size: 13px; color: var(--muted); line-height: 1.55; flex: 1; margin: 0; } .related-go { font-size: 12.5px; font-weight: 700; color: var(--primary-hover); letter-spacing: .02em; } .related-card:hover .related-go { color: #fff; } /* Inline contextual links inside review/body content */ .review a:not(.btn), .page-head a, .orig-copy a { color: var(--primary-hover); text-decoration: none; border-bottom: 1px solid rgba(111,118,255,.35); transition: color .15s ease, border-color .15s ease; } .review a:not(.btn):hover, .page-head a:hover, .orig-copy a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.6); } /* Locale / region switcher in the header */ .locale { position: relative; } .locale > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 7px; background: var(--panel-2); color: #fff; padding: 9px 12px; border-radius: 12px; font-weight: 600; font-size: 14px; border: 1px solid var(--border); transition: background .15s ease, border-color .15s ease; } .locale > summary::-webkit-details-marker { display: none; } .locale > summary:hover { background: var(--panel-3); border-color: var(--border-strong); } .locale .flag { font-size: 17px; line-height: 1; } .locale .loc-caret { width: 14px; height: 14px; opacity: .7; transition: transform .18s ease; } .locale[open] > summary .loc-caret { transform: rotate(180deg); } .locale-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 190px; padding: 6px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px; } .loc-opt { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 10px; text-decoration: none; color: #d7dbec; font-size: 14px; font-weight: 600; transition: background .14s ease, color .14s ease; } .loc-opt:hover { background: var(--panel-2); color: #fff; } .loc-opt.active { background: rgba(91,99,245,.16); color: #fff; } .loc-opt .loc-sub { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--muted-2); } .loc-opt.active .loc-sub { color: var(--primary-hover); } @media (max-width: 560px) { .locale > summary .loc-label { display: none; } .locale > summary { padding: 9px 10px; } } /* locale switcher relocated to footer */ .footer-locale { margin-top: 22px; display: flex; } .footer-locale .locale-menu { top: auto; bottom: calc(100% + 10px); right: auto; left: 0; } .footer-locale .locale > summary .loc-label { display: inline; } /* ===== Sportsbook content image ===== */ .sb-shot { margin: 22px 0 8px; position: relative; } .sb-shot img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 22px 46px -12px rgba(0,0,0,.6); } /* ===== Header nav dropdown (desktop) ===== */ .nav-item { position: relative; display: inline-flex; align-items: center; } .has-drop > a::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); opacity: .7; } .nav-drop { position: absolute; top: 100%; left: -14px; min-width: 196px; background: #14141f; border: 1px solid var(--border); border-radius: 12px; padding: 8px; display: none; flex-direction: column; gap: 2px; box-shadow: 0 18px 44px -12px rgba(0,0,0,.7); z-index: 60; } .nav-drop::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { display: flex; } .nav-drop a { color: #c7cbdd; font-size: 14px; font-weight: 600; padding: 9px 11px; border-radius: 8px; white-space: nowrap; } .nav-drop a:hover { background: rgba(255,255,255,.06); color: #fff; } .nav-drop a.active { color: #fff; background: rgba(91,99,245,.16); } /* ===== Live Blackjack page ===== */ .bj-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: radial-gradient(900px 420px at 82% -10%, rgba(91,99,245,.22), transparent 60%), linear-gradient(180deg, #0d0d18, #0b0b14); } .bj-hero .container { display: grid; gap: 34px; padding: 22px 18px 48px; } @media (min-width: 980px) { .bj-hero .container { grid-template-columns: minmax(0, 1fr) 270px; gap: 40px; align-items: center; } } .bj-hero .breadcrumbs { padding: 0 0 4px; } .bj-hero h1 { font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(32px, 5.2vw, 52px); line-height: 1.06; margin: 14px 0 0; } .bj-hero .lead { color: #c7cbdd; font-size: 18px; line-height: 1.6; max-width: 60ch; margin: 18px 0 0; } .bj-live { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ff5470; } .bj-live .dot { width: 9px; height: 9px; border-radius: 50%; background: #ff2d55; animation: bjpulse 1.6s infinite; } @keyframes bjpulse { 0% { box-shadow: 0 0 0 0 rgba(255,45,85,.55); } 70% { box-shadow: 0 0 0 9px rgba(255,45,85,0); } 100% { box-shadow: 0 0 0 0 rgba(255,45,85,0); } } .bj-eyebrow { display: inline-block; margin: 18px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary-hover); background: rgba(91,99,245,.12); border: 1px solid rgba(91,99,245,.3); padding: 6px 14px; border-radius: 999px; } .bj-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .btn-watch { background: #ff2d55; color: #fff; display: inline-flex; align-items: center; gap: 9px; } .btn-watch:hover { background: #ff4767; color: #fff; } @media (max-width: 560px) { .bj-cta { flex-direction: column; align-items: stretch; flex-wrap: nowrap; } .bj-cta .btn { width: 100%; justify-content: center; text-align: center; } .bj-cta .btn-primary { order: -1; } } .bj-card-wrap { position: relative; display: flex; justify-content: center; } .bj-card-wrap::before { content: ""; position: absolute; inset: 4% 8%; background: radial-gradient(closest-side, rgba(91,99,245,.5), transparent 72%); filter: blur(26px); z-index: 0; } .bj-card { position: relative; z-index: 1; width: 270px; max-width: 100%; height: auto; border-radius: 18px; box-shadow: 0 28px 60px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); } @media (min-width: 980px) { .bj-card-wrap { justify-content: stretch; } .bj-card { width: 100%; } } .bj-viewers { position: absolute; z-index: 2; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(8,8,14,.82); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; } .bj-chaos { margin: 22px 0; padding: 16px 20px; border-left: 3px solid #ff2d55; background: rgba(255,45,85,.07); border-radius: 0 12px 12px 0; } .bj-chaos p { margin: 0; color: #e7e9f3; } .bj-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0; } @media (min-width: 640px) { .bj-quick { grid-template-columns: repeat(4, 1fr); } } .bj-quick .q { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px; } .bj-quick .q .n { font-family: "Sora", sans-serif; font-weight: 800; font-size: 20px; color: #fff; } .bj-quick .q .l { font-size: 12px; color: var(--muted); margin-top: 3px; } /* ===== Leaderboard table ===== */ .lb { margin: 22px 0 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); overflow: hidden; } .lb-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(91,99,245,.10), transparent); } .lb-pool { display: flex; align-items: center; gap: 13px; } .lb-pool .tr { width: 38px; height: 38px; flex-shrink: 0; color: var(--primary-hover); } .lb-pool .lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); } .lb-pool .amt { display: block; font-family: "Sora", sans-serif; font-weight: 800; font-size: 22px; color: #fff; line-height: 1.15; } .lb-timer { font-size: 12px; font-weight: 600; color: #c7cbdd; background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px; } .lb-wrap { overflow-x: auto; } .lb table { width: 100%; border-collapse: collapse; min-width: 420px; } .lb th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 12px 18px; } .lb th.num { text-align: right; } .lb td { padding: 13px 18px; border-top: 1px solid var(--border); font-size: 14.5px; } .lb tbody tr:nth-child(-n+3) { background: rgba(91,99,245,.06); } .lb .place { font-weight: 700; color: #fff; width: 70px; white-space: nowrap; } .lb .place .m { margin-right: 4px; } .lb tbody tr:nth-child(1) .m { color: #f3c14b; } .lb tbody tr:nth-child(2) .m { color: #c4ccda; } .lb tbody tr:nth-child(3) .m { color: #cd8b52; } .lb .player { font-weight: 600; color: #fff; } .lb .pts { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } .lb .prize { text-align: right; font-weight: 700; color: #3fb968; font-variant-numeric: tabular-nums; white-space: nowrap; }