:root { color-scheme: light; --background:#f7f7f9; --foreground:#14131a; --primary:#4f41ba; --primary-foreground:#fff; --muted:#f0eff3; --muted-foreground:#7b7884; --border:#e9e7ed; font-family:Arial,Helvetica,sans-serif; font-synthesis:none; text-rendering:optimizeLegibility; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--background); color:var(--foreground); }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { color:inherit; cursor:pointer; }
.app-shell { min-height:100vh; padding-bottom:1px; }
.topbar { height:74px; padding:0 max(28px,calc((100vw - 1240px)/2)); display:flex; align-items:center; gap:38px; border-bottom:1px solid #eceaf0; background:rgba(255,255,255,.94); position:sticky; top:0; z-index:10; backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:12px; flex-shrink:0; border:0; padding:0; background:transparent; cursor:pointer; }
.brand img { width:40px; height:40px; object-fit:contain; filter:invert(1); mix-blend-mode:multiply; }
.brand-divider { height:27px; width:1px; background:#e2dfe8; }.brand-caption { color:#47434e; font-size:9px; font-weight:800; line-height:1.35; letter-spacing:.1em; }
.desktop-nav { align-self:stretch; display:flex; align-items:center; gap:32px; margin-left:20px; flex:1; }
.desktop-nav a { height:100%; display:flex; align-items:center; position:relative; padding:0; border:0; background:transparent; font-size:13px; color:#77737f; font-weight:650; white-space:nowrap; }
.desktop-nav a.nav-active { color:#24212a; }.desktop-nav a.nav-active::after { content:''; height:2px; position:absolute; bottom:0; left:0; right:0; background:#d701bf; }
.top-actions { display:flex; align-items:center; gap:16px; }.balance { border:1px solid #e9e7ed; border-radius:9px; height:37px; padding:0 11px; display:flex; align-items:center; gap:7px; background:white; font-weight:750; font-size:13px; }.balance small { color:#85808d; font-size:9px; letter-spacing:.08em; }.coin { color:#d701bf; font-size:16px; }
.avatar { width:34px; height:34px; border-radius:50%; border:2px solid #fff; background:linear-gradient(135deg,#76dbfd,#d701bf 72%); color:white; font-size:10px; font-weight:800; box-shadow:0 0 0 1px #e2dfe8; display:grid; place-items:center; }
.page-wrap { width:min(1240px,calc(100% - 56px)); margin:28px auto 50px; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:27px; align-items:start; }
.hero { position:relative; overflow:hidden; min-height:307px; grid-column:1/-1; border-radius:16px; background:#15121c; color:white; padding:38px 40px 82px; display:flex; }
.hero::before { content:''; position:absolute; width:470px; height:470px; right:80px; top:-290px; border-radius:50%; background:#4f41ba; filter:blur(110px); opacity:.5; }.hero::after { content:''; position:absolute; width:240px; height:180px; right:160px; bottom:-140px; border-radius:50%; background:#d701bf; filter:blur(85px); opacity:.38; }
.hero-copy { position:relative; z-index:2; }.eyebrow,.section-kicker { font-size:9px; letter-spacing:.16em; font-weight:800; }.eyebrow { display:flex; align-items:center; gap:8px; color:#d2cfd9; }.live-dot { width:7px; height:7px; display:inline-block; background:#e32dd2; border-radius:50%; box-shadow:0 0 0 3px #e32dd223; flex:0 0 auto; }.eyebrow-divider { color:#77717f; }
.hero h1 { font-size:clamp(38px,4.2vw,54px); line-height:.99; letter-spacing:-.06em; margin:21px 0 12px; font-weight:850; }.hero h1 span { color:#76dbfd; }.hero-copy p { color:#c2bdca; font-size:13px; line-height:1.6; margin:0; }
.hero-actions { display:flex; gap:21px; align-items:center; margin-top:22px; }.primary-cta { height:39px; padding:0 15px; display:inline-flex; gap:12px; align-items:center; border:0; border-radius:7px; background:#d701bf; color:white; font-size:11px; font-weight:800; box-shadow:0 4px 18px #d701bf40; }.primary-cta:hover { background:#ea16ce; }.text-cta { display:inline-flex; gap:7px; align-items:center; border:0; background:transparent; color:#d3ced9; font-size:11px; font-weight:650; }
.hero-art { position:absolute; right:31px; top:7px; height:264px; width:340px; z-index:1; }.art-orbit { position:absolute; border:1px solid #ffffff21; border-radius:50%; transform:rotate(-27deg); }.orbit-one { width:265px; height:115px; top:80px; left:39px; }.orbit-two { width:225px; height:75px; top:102px; left:57px; transform:rotate(38deg); border-color:#76dbfd53; }
.art-disc { position:absolute; top:57px; left:107px; width:128px; height:128px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 35% 30%,#76dbfd,#4f41ba 50%,#d701bf 100%); box-shadow:0 0 55px #d701bf66,inset 0 0 0 7px #ffffff1b; transform:rotate(-13deg); }.art-disc::before,.art-disc::after { content:''; position:absolute; border:1px solid #ffffff52; border-radius:50%; inset:14px; }.art-disc::after { inset:31px; }.art-disc span { position:relative; z-index:1; font-size:34px; font-weight:950; letter-spacing:-.1em; font-style:italic; text-shadow:2px 3px 0 #14131a; }
.art-sticker { position:absolute; top:41px; left:232px; background:#76dbfd; color:#16131b; font-weight:950; font-size:13px; line-height:1; padding:11px 12px 9px; transform:rotate(10deg); box-shadow:3px 4px 0 #d701bf; }.art-spark { position:absolute; color:#76dbfd; }.spark-one { top:49px; left:61px; font-size:23px; }.spark-two { top:181px; left:238px; font-size:24px; color:#d701bf; }.art-caption { position:absolute; bottom:23px; left:126px; text-align:center; color:#b8b2c0; font-size:8px; letter-spacing:.18em; line-height:1.6; }.art-caption b { color:#fff; font-size:8px; }
.hero-stats { position:absolute; z-index:2; left:40px; right:40px; bottom:0; min-height:58px; border-top:1px solid #ffffff20; display:flex; align-items:center; gap:35px; }.hero-stats>div { display:flex; align-items:center; gap:9px; }.hero-stats b { display:block; font-size:12px; }.hero-stats small { display:block; font-size:9px; color:#a9a4af; margin-top:2px; }.hero-stats em { color:#8c8792; font-style:normal; }.stat-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; }.stat-icon.cyan { background:#76dbfd20; color:#76dbfd; }.stat-icon.pink { background:#d701bf20; color:#e52bd2; }.stat-live { margin-left:auto; }.stat-live .live-dot { width:6px; height:6px; }.hero-dismiss { position:absolute; top:14px; right:14px; z-index:3; display:grid; place-items:center; width:30px; height:30px; border:1px solid #ffffff26; border-radius:50%; background:#ffffff12; color:#fff; }
.market-section { grid-column:1; min-width:0; }.section-top { display:flex; align-items:end; justify-content:space-between; margin:3px 0 19px; }.section-kicker { color:#928d9b; margin-bottom:7px; }.section-top h2,.leader-head h2 { margin:0; font-size:21px; line-height:1.15; letter-spacing:-.045em; }.filter-button { height:33px; padding:0 10px; border:1px solid #e7e5eb; border-radius:7px; background:white; display:flex; align-items:center; gap:7px; font-size:10px; font-weight:700; }

.market-list { display:grid; gap:11px; }.market-card { border:1px solid #e9e7ed; border-radius:11px; background:#fff; padding:15px 16px 0; transition:border-color .2s,box-shadow .2s; }.market-card:hover { border-color:#d8d3e7; box-shadow:0 6px 20px #25203008; }.card-heading { display:flex; justify-content:space-between; align-items:flex-start; }.market-type { color:#898592; font-size:8px; letter-spacing:.13em; font-weight:800; }.card-heading h3 { margin:5px 0 12px; font-size:14px; letter-spacing:-.02em; }.more-button { border:0; background:transparent; color:#77737f; font-size:15px; letter-spacing:1px; padding:1px 0 0 6px; }
.contestants { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.contestant { min-width:0; height:59px; padding:0 10px; display:flex; align-items:center; gap:8px; border:1px solid #e9e7ed; background:#fff; border-radius:7px; text-align:left; transition:background .16s,border-color .16s,transform .16s; }.contestant:hover { border-color:#c9c3e3; background:#faf9fd; transform:translateY(-1px); }.player-avatar { --avatar-color:#4f41ba; width:34px; height:34px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto; color:#fff; font-size:9px; font-weight:850; background:linear-gradient(145deg,color-mix(in srgb,var(--avatar-color),white 28%),var(--avatar-color)); box-shadow:inset 0 -8px 16px #00000018; }.player-details { min-width:0; flex:1; }.player-details b { display:block; font-size:11px; }.player-details small { display:block; margin-top:3px; color:#8a8592; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.odds-block { text-align:right; flex:0 0 auto; }.odds-block b { display:block; color:#4f41ba; font-size:14px; letter-spacing:-.03em; }.odds-block small { display:block; color:#95919c; font-size:8px; }.pick-arrow { color:#b6b2bc; display:none; }
.card-footer { border-top:1px solid #f0eef2; margin-top:13px; height:33px; display:flex; align-items:center; gap:15px; color:#85818c; font-size:9px; }.countdown,.volume { display:inline-flex; gap:5px; align-items:center; }.card-mobile-volume { display:none; }.volume { margin-left:auto; }.load-more { width:100%; height:39px; margin-top:12px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid #e6e3eb; border-radius:8px; background:#fff; font-size:10px; font-weight:750; color:#514a62; }
.side-column { grid-column:2; display:grid; gap:12px; padding-top:2px; }.leaderboard-card { background:#fff; border:1px solid #e9e7ed; border-radius:11px; padding:17px; }.leader-head { display:flex; justify-content:space-between; align-items:center; }.leader-head h2 { font-size:17px; }.leader-head button { border:0; background:#f6f4f9; width:29px; height:29px; border-radius:7px; display:grid; place-items:center; color:#605a6a; }.leader-summary { margin-top:16px; border-radius:8px; background:#f7f6fa; display:grid; grid-template-columns:1fr 1fr; padding:10px 12px; align-items:center; }.leader-summary>span:first-child { color:#8b8693; letter-spacing:.1em; font-weight:800; font-size:8px; }.leader-summary b { text-align:right; font-size:15px; }.leader-summary b small { color:#898592; font-size:9px; font-weight:500; }.rank-change { grid-column:1/-1; margin-top:6px; font-size:9px; color:#4f41ba; font-weight:700; }.leader-list { margin-top:8px; }.leader-row { min-height:40px; display:flex; align-items:center; gap:9px; border-bottom:1px solid #f2f0f4; }.leader-row:last-child { border:0; }.leader-rank { width:15px; color:#a19ca8; font-size:9px; font-weight:800; }.leader-avatar { --avatar-color:#4f41ba; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#fff; font-size:9px; font-weight:800; background:linear-gradient(135deg,color-mix(in srgb,var(--avatar-color),white 24%),var(--avatar-color)); }.leader-row b { flex:1; font-size:10px; }.leader-points { font-size:10px; font-weight:800; }.leader-points small { font-size:8px; color:#8d8895; font-weight:500; }.leader-row.yours { background:linear-gradient(90deg,#f8f6ff,transparent); margin:0 -7px; padding:0 7px; }.leader-row.yours .leader-rank,.leader-row.yours .leader-points { color:#4f41ba; }.leader-link { color:#4f41ba; font-size:10px; font-weight:750; display:flex; justify-content:center; align-items:center; gap:6px; padding-top:12px; border:0; background:transparent; width:100%; }
.how-card { background:#17131e; border-radius:10px; padding:15px; color:white; display:flex; align-items:flex-start; gap:12px; }.how-icon { width:33px; height:33px; display:grid; place-items:center; border-radius:8px; background:#d701bf24; color:#e82bd4; flex:0 0 auto; }.how-card h3 { margin:0 0 5px; font-size:12px; }.how-card p { margin:0; color:#c3bdca; font-size:9px; line-height:1.5; }.how-card button { display:inline-flex; align-items:center; gap:5px; border:0; padding:9px 0 0; background:transparent; color:#76dbfd; font-size:9px; font-weight:750; }.fine-print { text-align:center; color:#9a95a0; font-size:9px; line-height:1.55; padding:1px 10px; }
.mobile-nav { display:none; }
.telegram-link { height:34px; padding:0 10px; display:inline-flex; align-items:center; gap:6px; border:1px solid #dceef9; border-radius:8px; background:#f1faff; color:#168ac2; font-size:10px; font-weight:750; white-space:nowrap; }.telegram-link:hover { background:#e5f6ff; border-color:#a9ddf6; }
.balance small { white-space:nowrap; font-size:8px; }
.welcome-overlay { position:fixed; inset:0; z-index:40; overflow-y:auto; background:#15121c; }
.hero.welcome-dialog { width:100%; height:100dvh; min-height:100dvh; grid-column:auto; justify-content:flex-start; align-items:center; border-radius:0; padding:clamp(34px,8vw,100px); }
.welcome-dialog .hero-copy { width:min(100%,760px); }
.welcome-dialog .hero-stats { left:clamp(34px,8vw,100px); right:clamp(34px,8vw,100px); }
.welcome-dialog .hero-art { right:clamp(20px,7vw,90px); }
.welcome-dialog .welcome-telegram { position:absolute; top:18px; right:62px; z-index:4; }
@media(max-width:800px) {
  .top-actions { gap:7px; }
  .telegram-link { width:32px; padding:0; justify-content:center; }
  .telegram-link span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .balance { gap:5px; padding:0 6px; }
  .balance small { font-size:7px; letter-spacing:0; }
  .hero.welcome-dialog { height:100dvh; min-height:100dvh; padding:66px 22px 112px; }
  .welcome-dialog .hero-copy { width:100%; }
  .welcome-dialog .hero-art { right:-95px; top:8px; opacity:.27; }
  .welcome-dialog .hero-stats { left:18px; right:18px; min-height:unset; padding:11px 0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .welcome-dialog .stat-live { grid-column:1/-1; margin-left:0; }
}
@media(max-width:370px) {
  .hero.welcome-dialog { padding-left:16px; padding-right:16px; }
  .welcome-dialog .hero-stats { left:14px; right:14px; }
}
.modal-backdrop { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:16px; background:#15121c88; backdrop-filter:blur(4px); }.bet-modal { width:min(420px,100%); padding:24px; border:1px solid #e9e7ed; background:#fff; border-radius:16px; box-shadow:0 25px 90px #17131e30; position:relative; }.modal-close { position:absolute; right:17px; top:16px; width:28px; height:28px; border:0; border-radius:7px; background:#f4f2f6; color:#77737f; display:grid; place-items:center; }.modal-close svg { width:16px; }.bet-modal h2 { max-width:310px; font-size:21px; letter-spacing:-.04em; margin:0 0 19px; }.selected-pick { min-height:45px; padding:0 12px; display:flex; align-items:center; gap:9px; border-radius:8px; background:#f6f4fa; font-size:11px; color:#7b7684; }.selected-pick b { color:#211e28; }.selected-pick strong { margin-left:auto; color:#4f41ba; font-size:15px; }.amount-label { display:block; margin:18px 0 7px; font-size:10px; font-weight:800; }.amount-input { height:48px; border:1px solid #e7e4eb; border-radius:8px; display:flex; align-items:center; gap:8px; padding:0 12px; }.amount-input>span { color:#d701bf; }.amount-input input { width:65px; border:0; outline:0; font-size:17px; font-weight:800; }.amount-input small { margin-left:auto; color:#928d99; font-size:9px; }.quick-amounts { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:8px; }.quick-amounts button { height:31px; border:1px solid #e9e7ed; border-radius:7px; background:#fff; font-size:10px; font-weight:700; }.quick-amounts .quick-active { background:#f1eff9; color:#4f41ba; border-color:#cbc4e5; }.potential { display:flex; justify-content:space-between; margin:17px 0; font-size:11px; color:#77727e; }.potential b { color:#24212a; font-size:14px; }.confirm-pick { height:45px; width:100%; border:0; border-radius:8px; display:flex; justify-content:center; align-items:center; gap:8px; background:#d701bf; color:white; font-size:12px; font-weight:800; }.confirm-pick:hover { background:#b900a3; }.modal-note { text-align:center; color:#928d99; font-size:9px; margin:11px 0 0; }.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:40; width:max-content; max-width:calc(100vw - 28px); min-height:46px; border-radius:10px; background:#211d29; color:white; box-shadow:0 8px 30px #15121c2c; display:flex; align-items:center; gap:9px; padding:8px 12px; font-size:11px; }.toast-check { color:#76dbfd; display:flex; }.toast button { margin-left:8px; border:0; background:transparent; color:#d1ccd7; display:flex; }
.stage-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:0 0 13px; }.stage-option { min-width:0; min-height:64px; padding:10px; display:flex; align-items:center; gap:9px; border:1px solid #e8e6ed; border-radius:9px; background:#fff; text-align:left; transition:border-color .18s,background .18s; }.stage-option.stage-selected { background:#f6f4fc; border-color:#a99edc; box-shadow:inset 0 0 0 1px #4f41ba17; }.stage-number { color:#4f41ba; font-size:10px; font-weight:900; letter-spacing:.04em; }.stage-info { min-width:0; flex:1; }.stage-info b,.stage-info small { display:block; }.stage-info b { font-size:10px; white-space:nowrap; }.stage-info small { margin-top:4px; color:#88838f; font-size:8px; line-height:1.2; }.stage-indicator { width:7px; height:7px; border-radius:50%; background:#28a889; box-shadow:0 0 0 3px #28a8891b; flex:0 0 auto; }.stage-disabled { background:#f3f2f4; border-color:#e6e4e8; cursor:not-allowed; color:#96919b; }.stage-disabled .stage-number { color:#a39eaa; }.stage-disabled .stage-info small { color:#b11c75; }.stage-lock { flex:0 0 auto; color:#b11c75; }
.content-screen,.login-screen { grid-column:1/-1; width:100%; min-width:0; min-height:64vh; }.screen-title { margin:6px 0 7px; font-size:clamp(28px,5vw,38px); line-height:1.05; letter-spacing:-.055em; }.screen-subtitle { margin:0 0 24px; color:#817c88; font-size:13px; line-height:1.55; }.rank-highlight { display:flex; align-items:center; gap:13px; padding:18px; margin-bottom:15px; border-radius:12px; background:#17131e; color:white; }.rank-trophy { width:42px; height:42px; display:grid; place-items:center; color:#76dbfd; background:#76dbfd1b; border-radius:10px; }.rank-highlight>div { display:flex; flex-direction:column; gap:4px; flex:1; }.rank-highlight>div small { color:#b3acbc; font-size:8px; letter-spacing:.12em; font-weight:800; }.rank-highlight>div b { font-size:17px; }.rank-highlight>div b em { color:#a9a3b2; font-style:normal; font-size:10px; font-weight:500; }.rank-highlight .rank-change { margin:0; font-size:9px; }.rank-highlight>strong { font-size:16px; color:#76dbfd; }.rank-highlight>strong small { color:#b3acbc; font-size:9px; font-weight:500; }.full-leaderboard { max-width:760px; padding:18px; }.full-leaderboard .leader-row { min-height:54px; gap:12px; }.full-leaderboard .leader-avatar { width:32px; height:32px; font-size:11px; }.full-leaderboard .leader-row b,.full-leaderboard .leader-points { font-size:12px; }.full-leaderboard .leader-rank { width:23px; font-size:11px; }.rank-note { border-top:1px solid #f0eef2; padding-top:12px; margin-top:6px; color:#8d8893; font-size:10px; }
.bracket-screen { overflow:hidden; }.bracket-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; }.bracket-legend { display:flex; gap:15px; flex-wrap:wrap; }.bracket-legend>span { display:inline-flex; align-items:center; gap:6px; color:#77727e; font-size:9px; }.legend-dot { width:7px; height:7px; display:inline-block; border-radius:50%; background:#4f41ba; }.legend-dot.lower { background:#d701bf; }.legend-dot.final { background:#76dbfd; }.zoom-controls { display:flex; align-items:center; gap:3px; padding:3px; border:1px solid #e8e6ed; border-radius:8px; background:white; }.zoom-controls button { width:29px; height:28px; display:grid; place-items:center; border:0; border-radius:5px; background:transparent; color:#5e5965; }.zoom-controls button:hover { background:#f0eef5; color:#4f41ba; }.zoom-controls span { min-width:40px; text-align:center; font-size:9px; color:#77727e; }
.bracket-viewport { height:min(59vh,530px); min-height:340px; width:100%; overflow:hidden; position:relative; border:1px solid #e8e6ed; border-radius:12px; background-color:#fbfafc; background-image:radial-gradient(#c9c4d2 1px,transparent 1px); background-size:19px 19px; cursor:grab; touch-action:none; }.bracket-viewport:active { cursor:grabbing; }.bracket-canvas { position:absolute; left:0; top:0; width:1120px; height:660px; transform-origin:top left; transition:transform .15s ease-out; }.bracket-viewport:active .bracket-canvas { transition:none; }.bracket-label { position:absolute; color:#817b8a; font-size:10px; letter-spacing:.14em; font-weight:850; }.upper-label { top:5px; left:10px; color:#4f41ba; }.lower-label { top:334px; left:10px; color:#d701bf; }.final-label { top:175px; left:862px; color:#388ca7; }.bracket-match { position:absolute; z-index:1; width:170px; overflow:hidden; border:1px solid #ded9e8; border-radius:8px; background:#fff; box-shadow:0 3px 10px #211d2910; }.bracket-match-title { padding:8px 9px; background:#f3f1f9; color:#726b80; font-size:8px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; }.bracket-player { min-height:31px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 9px; border-top:1px solid #f1eff4; color:#67626e; font-size:9px; }.bracket-player b { color:#9c97a3; font-size:9px; }.bracket-player.bracket-winner { background:#f5f3fb; color:#312a46; font-weight:750; }.bracket-player.bracket-winner b { color:#4f41ba; }.bracket-lower .bracket-match-title { background:#fff0fb; }.bracket-lower .bracket-player.bracket-winner b { color:#d701bf; }.bracket-final { border-color:#76dbfd; box-shadow:0 0 0 3px #76dbfd25,0 5px 16px #211d2910; }.bracket-final .bracket-match-title { background:#e9faff; color:#317e96; }.bm-1 { top:38px; left:5px; }.bm-2 { top:139px; left:5px; }.bm-3 { top:240px; left:5px; }.bm-4 { top:38px; left:250px; }.bm-5 { top:91px; left:510px; }.bm-6 { top:266px; left:510px; }.bm-7 { top:174px; left:855px; }.bm-8 { top:365px; left:250px; }.bracket-connector { position:absolute; border-top:1px solid #cfc9dc; width:78px; left:175px; }.line-1 { top:89px; }.line-2 { top:190px; }.line-3 { top:290px; }.line-4 { top:412px; border-color:#e7b3df; }.drag-hint { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); padding:6px 10px; border-radius:99px; background:#fff; box-shadow:0 2px 8px #211d2912; color:#88838f; font-size:9px; white-space:nowrap; pointer-events:none; }.stage-note { display:flex; align-items:center; gap:8px; margin-top:12px; color:#77727e; font-size:9px; letter-spacing:.04em; }
.my-pick-card { max-width:650px; padding:15px; border:1px solid #e8e6ed; border-radius:12px; background:white; }.live-match-banner { display:flex; align-items:center; gap:8px; padding-bottom:12px; border-bottom:1px solid #efedf2; font-size:9px; font-weight:850; letter-spacing:.09em; color:#d701bf; }.live-match-banner span:last-child { margin-left:auto; color:#8c8793; font-size:8px; }.playing-now { display:flex; align-items:center; gap:12px; padding:17px 0 14px; }.large-avatar { width:49px; height:49px; border-radius:12px; font-size:12px; }.playing-now>div:nth-child(2) { flex:1; min-width:0; }.playing-now small { display:block; color:#8c8793; font-size:8px; letter-spacing:.1em; font-weight:800; }.playing-now h2 { margin:5px 0; font-size:19px; letter-spacing:-.04em; }.playing-now p { margin:0; color:#827d89; font-size:10px; }.performing-pill { display:inline-block; padding:4px 6px; vertical-align:3px; border-radius:4px; background:#ffeaf8; color:#bc009f; font-size:7px; letter-spacing:.04em; white-space:nowrap; }.playing-pulse { display:flex; align-items:center; gap:3px; height:22px; padding-right:4px; }.playing-pulse span { width:3px; border-radius:3px; background:#d701bf; animation:pulse-bar .85s ease-in-out infinite alternate; }.playing-pulse span:nth-child(1){height:9px}.playing-pulse span:nth-child(2){height:20px;animation-delay:.2s}.playing-pulse span:nth-child(3){height:13px;animation-delay:.4s}@keyframes pulse-bar { to { transform:scaleY(.42); opacity:.55; } }.pick-progress,.pick-outcome { display:flex; justify-content:space-between; color:#77727e; font-size:9px; }.progress-track { height:5px; margin:7px 0 12px; overflow:hidden; border-radius:99px; background:#f0eef3; }.progress-track span { display:block; width:64%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#4f41ba,#d701bf); }.pick-outcome { padding-top:11px; border-top:1px solid #efedf2; }.pick-outcome b { color:#4f41ba; font-size:11px; }.subsection-title { margin:24px 0 11px; font-size:15px; letter-spacing:-.03em; }.saved-pick { display:flex; align-items:center; gap:10px; padding:12px; }.saved-pick-info { min-width:0; flex:1; }.saved-pick-info b,.saved-pick-info small { display:block; }.saved-pick-info b { font-size:10px; }.saved-pick-info small { margin-top:5px; color:#8b8692; font-size:8px; }.saved-status { color:#817a91; background:#f2f0f6; border-radius:99px; padding:5px 7px; font-size:7px; font-weight:850; white-space:nowrap; }.empty-tip { max-width:650px; display:flex; align-items:center; gap:8px; padding:12px 2px; color:#827d89; font-size:9px; }.empty-tip>svg { color:#d701bf; flex:0 0 auto; }.empty-tip span { flex:1; }.empty-tip button { border:0; background:transparent; color:#4f41ba; display:inline-flex; align-items:center; gap:4px; font-size:9px; font-weight:800; white-space:nowrap; }
.login-screen { min-height:68vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 0 25px; }.login-back { align-self:flex-start; display:inline-flex; align-items:center; gap:7px; margin:0 0 12px; border:0; background:transparent; color:#716c79; font-size:10px; font-weight:700; }.login-card { width:min(100%,410px); padding:27px; border:1px solid #e9e7ed; border-radius:14px; background:white; box-shadow:0 9px 35px #211d2909; }.login-mark { width:48px; height:48px; margin-bottom:20px; display:grid; place-items:center; border-radius:12px; background:#15121c; }.login-mark img { width:37px; height:37px; object-fit:contain; }.login-card .screen-title { font-size:28px; }.login-card .screen-subtitle { margin:8px 0 22px; font-size:11px; }.login-label { display:block; margin:13px 0 6px; color:#47424e; font-size:9px; font-weight:800; }.login-input { height:43px; display:flex; align-items:center; gap:9px; padding:0 11px; border:1px solid #e7e4eb; border-radius:7px; color:#938e9b; }.login-input:focus-within { border-color:#8f82d2; box-shadow:0 0 0 3px #4f41ba12; }.login-input input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#211e28; font-size:11px; }.login-input input::placeholder { color:#aaa5b0; }.forgot-button { display:block; margin:9px 0 14px auto; border:0; background:transparent; color:#4f41ba; font-size:9px; font-weight:750; }.login-submit { margin-top:6px; }.login-disclaimer { margin-top:15px; text-align:center; color:#96919c; font-size:8px; line-height:1.5; }
.nav-bracket-icon,.nav-bets-icon { width:20px; height:19px; display:flex; align-items:center; justify-content:center; gap:2px; }.nav-bracket-icon i { display:block; width:5px; height:7px; border:1.5px solid currentColor; border-radius:2px; }.nav-bracket-icon i:nth-child(2) { height:11px; }.nav-bets-icon i { display:block; width:3px; border-radius:2px; background:currentColor; }.nav-bets-icon i:nth-child(1){height:8px}.nav-bets-icon i:nth-child(2){height:15px}.nav-bets-icon i:nth-child(3){height:11px}
@media(max-width:800px) { .topbar { height:60px; padding:0 16px; gap:12px; background:#fff; }.brand { gap:9px; }.brand img { width:38px; height:38px; }.brand-divider,.brand-caption,.desktop-nav { display:none; }.top-actions { margin-left:auto; gap:11px; }.balance { height:34px; padding:0 8px; }.avatar { width:31px; height:31px; }.page-wrap { width:min(100% - 28px,560px); margin:13px auto 28px; display:flex; flex-direction:column; gap:24px; }.hero { width:100%; min-height:290px; border-radius:13px; padding:25px 20px 78px; }.hero::before { right:-100px; top:-230px; }.hero h1 { font-size:clamp(38px,10vw,48px); margin-top:19px; }.hero-copy p { font-size:11px; }.hero-actions { gap:13px; margin-top:18px; }.primary-cta { height:37px; font-size:10px; padding:0 11px; gap:7px; }.text-cta { font-size:10px; }.hero-art { right:-87px; top:19px; opacity:.34; transform:scale(.78); transform-origin:top left; }.hero-copy { z-index:2; }.hero-stats { left:18px; right:18px; min-height:59px; gap:15px; }.hero-stats>div { gap:7px; }.hero-stats b { font-size:10px; }.hero-stats small { font-size:8px; }.stat-icon { width:26px; height:26px; }.stat-icon svg { width:14px; }.stat-live { gap:5px!important; }.market-section,.side-column,.content-screen,.login-screen { width:100%; }.section-top { margin:0 0 16px; }.section-top h2 { font-size:20px; }.category-row { margin-right:-14px; padding-right:14px; }.market-list { gap:10px; }.market-card { padding:13px 12px 0; }.card-heading h3 { font-size:13px; margin-bottom:11px; }.contestants { gap:6px; }.contestant { height:57px; padding:0 7px; gap:6px; }.player-avatar { width:29px; height:29px; border-radius:7px; font-size:8px; }.player-details b { font-size:10px; }.player-details small { font-size:8px; }.odds-block b { font-size:13px; }.odds-block small { font-size:7px; }.card-footer { margin-top:11px; }.volume { display:none; }.card-mobile-volume { display:inline; margin-left:auto; }.load-more { margin-top:10px; }.side-column { grid-template-columns:1fr; gap:10px; padding-top:0; }.leaderboard-card { padding:16px; }.leader-head h2 { font-size:16px; }.fine-print { text-align:left; padding:0 3px; }.footer { width:calc(100% - 28px); padding-bottom:82px; font-size:7px; }.mobile-nav { position:fixed; z-index:15; bottom:0; left:0; right:0; height:calc(59px + env(safe-area-inset-bottom)); padding:5px 8px env(safe-area-inset-bottom); border-top:1px solid #e9e7ed; background:rgba(255,255,255,.97); backdrop-filter:blur(14px); display:grid; grid-template-columns:repeat(4,1fr); }.mobile-nav a { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; border:0; background:transparent; color:#8c8793; font-size:8px; font-weight:700; }.mobile-nav svg { width:18px; height:18px; }.mobile-nav .mobile-nav-active { color:#4f41ba; }.modal-backdrop { align-items:end; padding:0; }.bet-modal { width:100%; border-radius:17px 17px 0 0; padding:23px 20px calc(23px + env(safe-area-inset-bottom)); }.toast { bottom:calc(70px + env(safe-area-inset-bottom)); }.stage-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.stage-option { min-height:57px; padding:8px; gap:7px; }.stage-info b { font-size:9px; }.stage-info small { font-size:7px; }.screen-title { font-size:29px; }.screen-subtitle { margin-bottom:19px; font-size:11px; }.bracket-viewport { height:52vh; min-height:365px; max-height:510px; }.bracket-toolbar { align-items:flex-start; flex-direction:column; }.bracket-legend { gap:11px; }.zoom-controls { align-self:flex-end; margin-top:-1px; }.bracket-canvas { width:1040px; }.rank-highlight { gap:10px; padding:13px; }.rank-trophy { width:36px; height:36px; }.rank-highlight>strong { font-size:14px; }.login-screen { min-height:70vh; justify-content:flex-start; padding-top:8px; }.login-card { padding:22px 19px; }.login-back { margin-bottom:11px; } }
@media(max-width:370px) { .hero { padding-left:16px; padding-right:16px; }.hero-stats { left:14px; right:14px; gap:9px; }.hero-stats>div { gap:5px; }.stat-icon { width:23px; height:23px; }.hero-stats small { font-size:7px; }.hero-stats b { font-size:9px; }.contestant { padding:0 5px; gap:5px; }.player-avatar { width:26px; height:26px; }.odds-block b { font-size:12px; }.odds-block small { font-size:7px; }.player-details b { font-size:9px; }.stage-option { min-height:54px; }.stage-number { font-size:9px; }.stage-info b { font-size:8px; }.stage-info small { font-size:6.5px; }.bracket-legend>span { font-size:8px; }.playing-now { gap:8px; }.large-avatar { width:42px; height:42px; }.playing-now h2 { font-size:16px; }.performing-pill { font-size:6px; padding:3px 4px; }.live-match-banner { font-size:8px; }.live-match-banner span:last-child { font-size:7px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }