/* ───────────────────────────────────────────────────────────────── * PlayGurus light theme — generated 2026-05-01 via ui-design:color-palette skill. * Logo brand anchors: navy #1a2540 (PLAY text), red #ed1f3a (GURUS pill). * All pairs WCAG AA-verified (4.5:1 normal text). See plan 3 for the contrast matrix. * Below this block are starterfive's alternate theme variants — kept as extra themes but * the :root below is the single source of truth for the default PlayGurus light theme. * ───────────────────────────────────────────────────────────────── */ /* ===== RESET & VARIABLES ===== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root { /* Brand — refined 2026-05-01 from playgurus.com screenshot observation */ --brand-navy: #1a2540; --brand-red: #ed1f3a; /* Surfaces (light) */ --bg: #ffffff; --surface: #ffffff; --surface2: #eef1f5; /* page-bg behind cards (refined: cooler than #f5f7fa) */ --surface-hover: #f0f3f8; --surface3: #4a5263; /* dark hero/score panel — slate medium-gray, not navy */ --border: #dde2eb; /* refined: slightly cooler */ --border2: #cbd5e1; --surface-rgb: 255,255,255; --shadow-card: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); --shadow-hover: 0 4px 12px rgba(15,23,42,.10), 0 2px 4px rgba(15,23,42,.06); --shadow-modal: 0 20px 40px rgba(15,23,42,.14), 0 8px 16px rgba(15,23,42,.08); /* Text on light surface */ --s900: #1a2540; --s800: #253354; --s700: #475569; --s500: #64748b; --s400: #94a3b8; /* Primary CTA — refined to match the GURUS pill / Create Account button red */ --cta-primary: #ed1f3a; --cta-primary-hover: #d6172f; --cta-primary-active: #b9111f; --cta-text-on-primary: #ffffff; --accent: #ed1f3a; /* Legacy aliases — keep starterfive's existing class names visually correct */ --gold: var(--cta-primary); --gold-dk: var(--cta-primary-hover); --gold-lt: rgba(237,31,58,.06); --gold-glow: rgba(237,31,58,.2); --on-accent: #ffffff; --emerald: #10b981; --blue: #3b82f6; --red: #ef4444; --orange: #f59e0b; --purple: #8b5cf6; --coin-from: #ffe066; --coin-mid: #f59e0b; --coin-edge: #b45309; /* Status (AA on white) */ --success: #10b981; --success-text: #047857; --success-bg: #d1fae5; --warn: #f59e0b; --warn-text: #b45309; --warn-bg: #fef3c7; --danger: #ef4444; --danger-text: #b91c1c; --danger-bg: #fee2e2; --info: #3b82f6; --info-text: #1d4ed8; --info-bg: #dbeafe; /* Live & activity */ --live-pulse: #10b981; --live-pulse-shadow: rgba(16,185,129,.35); /* Injury badges */ --injury-out-bg: #fee2e2; --injury-out-text: #b91c1c; --injury-out-border: #fca5a5; --injury-gtd-bg: #ffedd5; --injury-gtd-text: #c2410c; --injury-gtd-border: #fdba74; /* Shared dimensions */ --r: 10px; --r-sm: 8px; --sh: var(--shadow-card); --hdr: 56px; } [data-theme="amethyst"]{ --bg:#1a1228;--surface:#241a34;--surface2:#2e2242;--surface-rgb:36,26,52; --border:#3a2d52;--border2:#4e3d6a; --s400:#8878a0;--s500:#a090b8;--s700:#d0c4e2;--s800:#e4daef;--s900:#f4f0f8; --gold:#b388ff;--gold-dk:#9c6aff;--gold-lt:rgba(179,136,255,.08);--gold-glow:rgba(179,136,255,.25); --on-accent:#1a1228; --emerald:#81c784;--blue:#90caf9;--red:#ef9a9a;--orange:#ffcc80;--purple:#ce93d8; } [data-theme="slate"]{ --bg:#2a2d32;--surface:#353940;--surface2:#40454d;--surface-rgb:53,57,64; --border:#4e535c;--border2:#5e646e; --s400:#8a909a;--s500:#a0a6b0;--s700:#cdd2da;--s800:#e0e4ea;--s900:#f2f4f6; --gold:#c0cad8;--gold-dk:#a8b4c4;--gold-lt:rgba(192,202,216,.08);--gold-glow:rgba(192,202,216,.25); --on-accent:#2a2d32; --emerald:#81c784;--blue:#90caf9;--red:#ef9a9a;--orange:#ffcc80;--purple:#b0bec5; } [data-theme="frost"]{ --bg:#e8ecf0;--surface:#f4f6f8;--surface2:#dde2e8;--surface-rgb:244,246,248; --border:#c4ccd6;--border2:#b0bac6; --s400:#7a8494;--s500:#5c6878;--s700:#3a4452;--s800:#252d38;--s900:#141a22; --gold:#10b981;--gold-dk:#0d9668;--gold-lt:rgba(16,185,129,.06);--gold-glow:rgba(16,185,129,.2); --on-accent:#fff;--logo-accent:#2a3540; --emerald:#1b7a42;--blue:#2563eb;--red:#dc2626;--orange:#d97706;--purple:#7c3aed; } html{background:var(--bg);color:var(--s700);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} body{min-height:100vh;padding-top:calc(var(--hdr) + 14px)} a{color:var(--gold);text-decoration:none} button{cursor:pointer;font:inherit;border:none;background:none;color:inherit} input,select{font:inherit;color:inherit;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 12px;outline:none} input:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-glow)} ::placeholder{color:var(--s400)} ::-webkit-scrollbar{width:6px;height:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px} /* ===== HEADER ===== */ .sf-hdr{position:fixed;top:0;left:0;right:0;z-index:100;padding:10px 28px 0} .sf-hdr-inner{max-width:1140px;margin:0 auto;height:54px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(var(--surface-rgb),.96);border:1px solid var(--border);border-radius:16px;padding:0 24px;box-shadow:0 4px 16px rgba(15,23,42,.08)} .sf-logo{display:flex;align-items:center;white-space:nowrap;position:relative} .sf-logo::before{content:'';position:absolute;inset:-6px;border-radius:10px;background:radial-gradient(circle,var(--gold-glow),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none} .sf-logo:hover::before{opacity:1} .sf-logo svg{height:40px;width:auto;position:relative} .sf-hdr-left{display:flex;align-items:center;gap:8px} .sf-hdr-live{width:6px;height:6px;border-radius:50%;background:var(--emerald);animation:livePulse 2s ease-in-out infinite} @keyframes livePulse{0%,100%{opacity:1}50%{opacity:.3}} .cc{display:inline-block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 38% 32%,var(--coin-from) 0%,var(--coin-mid) 45%,var(--coin-edge) 100%);box-shadow:inset 0 -1px 2px rgba(0,0,0,.3),0 0 0 1px rgba(180,83,9,.5);vertical-align:middle;flex-shrink:0;position:relative} .cc::after{content:'C';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:900;color:rgba(120,53,0,.6);font-family:serif;line-height:1} .cc.lg{width:18px;height:18px}.cc.lg::after{font-size:10px} .cc.xl{width:22px;height:22px}.cc.xl::after{font-size:12px} .sf-nav{display:flex;gap:0;background:var(--surface2);border-radius:var(--r-sm);padding:3px;overflow-x:auto;scrollbar-width:none} .sf-nav::-webkit-scrollbar{display:none} .sf-nav-btn{padding:7px 18px;font-size:12px;font-weight:600;color:var(--s500);transition:all .15s;position:relative;white-space:nowrap;border-radius:6px} .sf-nav-btn:hover{color:var(--s800)} .sf-nav-btn.active{color:var(--s900);font-weight:700;background:var(--surface);box-shadow:0 1px 4px rgba(15,23,42,.08)} .sf-nav-btn.active::after{display:none} .sf-nav-btn[data-page="pickone"]{color:#f59e0b;font-weight:700} .sf-hdr-spacer{flex:1} .sf-hdr-right{display:flex;align-items:center;gap:12px;justify-content:flex-end} .sf-theme-picker{display:flex;gap:6px;align-items:center} .sf-theme-dot{width:22px;height:22px;border-radius:50%;cursor:pointer;transition:transform .15s,box-shadow .15s;padding:0} .sf-theme-dot:hover{transform:scale(1.15)} .sf-theme-dot.active{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold)} .sf-hdr-user{display:flex;align-items:center;gap:8px;justify-content:flex-end} .sf-hdr-avatar{width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px} .sf-hdr-name{font-weight:600;color:var(--s800);font-size:13px} .sf-btn-auth{padding:6px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:600;border:1px solid var(--border);color:var(--s700);transition:all .15s} .sf-btn-auth:hover{border-color:var(--gold);color:var(--gold)} .sf-btn-auth.primary{background:var(--emerald);color:var(--on-accent);border-color:var(--emerald)} .sf-btn-auth.primary:hover{background:#059669} .sf-hdr-menu{position:relative} .sf-hdr-dropdown{display:none;position:absolute;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);min-width:160px;box-shadow:var(--sh);z-index:200;overflow:hidden;max-height:calc(100vh - 120px);overflow-y:auto} .sf-hdr-dropdown.show{display:block} .sf-hdr-dropdown button{display:block;width:100%;text-align:left;padding:10px 14px;font-size:13px;color:var(--s700);transition:background .1s} .sf-hdr-dropdown button:hover{background:var(--surface2)} /* ===== V2 NETFLIX LOBBY ===== */ .nf-row{max-width:1140px;margin:0 auto;padding:0 28px;margin-bottom:40px} .nf-row-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .nf-row-title{font-size:14px;font-weight:700;color:var(--s800);letter-spacing:.3px} .nf-row-more{font-size:11px;font-weight:600;color:var(--s400);cursor:pointer;transition:color .2s} .nf-row-more:hover{color:var(--gold)} .nf-scroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory} .nf-scroll::-webkit-scrollbar{display:none} .nf-card{flex-shrink:0;scroll-snap-align:start;border-radius:16px;overflow:hidden;cursor:pointer;position:relative;transition:all .15s} .nf-card:hover{transform:translateY(-2px);border-color:var(--border2);box-shadow:0 8px 24px rgba(15,23,42,.10);z-index:2} .nf-card:active{transform:scale(.98)} .nf-hero{max-width:1140px;margin:0 auto;padding:24px 28px 0;margin-bottom:48px} .nf-hero-inner{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:48px;position:relative;overflow:hidden} .nf-hero-orb{position:absolute;border-radius:50%;pointer-events:none;animation:nfFloat 8s ease-in-out infinite} .nf-hero-orb.right{top:-80px;right:-60px;width:400px;height:400px;background:radial-gradient(circle,rgba(16,185,129,.05),transparent 60%)} .nf-hero-orb.left{bottom:-60px;left:-40px;width:300px;height:300px;background:radial-gradient(circle,var(--gold-lt),transparent 60%);animation-direction:reverse;animation-duration:10s} @keyframes nfFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(15px,-8px) scale(1.05)}66%{transform:translate(-10px,5px) scale(.97)}} .nf-live-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.12)} .nf-live-dot{width:6px;height:6px;border-radius:50%;background:var(--emerald);animation:livePulse 2s ease-in-out infinite} .nf-avatar-stack{display:flex} .nf-avatar-stack .av{width:20px;height:20px;border-radius:50%;border:2px solid var(--surface);margin-left:-6px;font-size:7px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center} .nf-avatar-stack .av:first-child{margin-left:0} .nf-avatar-stack .av-more{background:var(--surface2);color:var(--s400)} .nf-countdown{display:flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.5px;font-variant-numeric:tabular-nums} .nf-countdown .sep{opacity:.4;animation:livePulse 1s infinite} .nf-entry-bar{height:4px;border-radius:999px;background:var(--border);overflow:hidden} .nf-entry-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--emerald))} .nf-win-glow{position:absolute;inset:-1px;border-radius:16px;background:conic-gradient(from 0deg,transparent,var(--coin-mid),transparent,var(--coin-mid),transparent);animation:nfGlowRotate 4s linear infinite;z-index:0;opacity:.5} @keyframes nfGlowRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} .nf-win-inner{background:var(--surface);border-radius:15px;position:relative;z-index:1;height:100%} @keyframes nfCountPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} .nf-donut{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative} .nf-donut::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--surface)} .nf-donut span{position:relative;z-index:1;font-size:11px;font-weight:800;color:var(--emerald)} .nf-streak-visual{display:flex;align-items:flex-end;gap:3px;justify-content:center} .nf-streak-bar{width:4px;border-radius:2px;background:linear-gradient(to top,var(--coin-mid),var(--red));animation:nfStreakFlame 1.5s ease-in-out infinite} @keyframes nfStreakFlame{0%,100%{transform:scaleY(1) translateY(0);opacity:.8}50%{transform:scaleY(1.15) translateY(-2px);opacity:1}} .nf-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99;justify-content:space-around;align-items:center;padding:8px 0 max(12px,env(safe-area-inset-bottom));background:rgba(var(--surface-rgb),.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border)} .nf-bnav-item{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;font-weight:600;color:var(--s400);cursor:pointer;min-width:48px;transition:color .2s} .nf-bnav-item.active{color:var(--gold)} .nf-bnav-item svg{width:20px;height:20px} .nf-bnav-item.active svg{filter:drop-shadow(0 0 6px var(--gold-glow))} .nf-game-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);transition:border-color .2s} .nf-game-row:hover{border-color:var(--border2)} @media(max-width:768px){ .nf-hero{padding:12px 10px 0;margin-bottom:28px} .nf-hero-inner{padding:24px;border-radius:14px} .nf-hero-headline{font-size:24px !important} .nf-hero-grid{flex-direction:column !important;gap:20px !important} .nf-hero-games{display:none !important} .nf-row{padding:0 12px;margin-bottom:28px} .nf-bottom-nav{display:flex} #app{padding-bottom:72px} } /* ===== V1 IMPROVEMENTS ===== */ .v1-po-banner{background:var(--surface);border:1px solid rgba(245,158,11,.1);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .15s;margin-bottom:14px;position:relative;overflow:hidden} .v1-po-banner:hover{border-color:rgba(245,158,11,.3);box-shadow:0 4px 16px rgba(15,23,42,.08)} .v1-po-banner .glow{position:absolute;inset:0;background:linear-gradient(135deg,rgba(245,158,11,.03),transparent 50%);pointer-events:none} .v1-po-mults{display:flex;gap:3px;align-items:center} .v1-po-mult{padding:4px 8px;border-radius:5px;text-align:center;font-size:12px;font-weight:900} .v1-po-mult .rd{font-size:7px;color:var(--s400);margin-top:1px;font-weight:700} .v1-rc{flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;text-align:center;cursor:pointer;transition:all .15s;overflow:hidden} .v1-rc:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(15,23,42,.10)} .v1-rc.win{position:relative;padding:2px;border:none;border-radius:12px;overflow:visible;width:150px} .v1-rc .glow{position:absolute;inset:-1px;border-radius:12px;background:conic-gradient(from 0deg,transparent 0%,var(--coin-mid) 25%,transparent 50%,var(--coin-mid) 75%,transparent 100%);animation:nfGlowRotate 3s linear infinite;z-index:0;opacity:.6} .v1-rc .glow-inner{background:var(--surface);border-radius:11px;position:relative;z-index:1;overflow:hidden} .v1-rc.win .glow-inner{background:linear-gradient(180deg,rgba(245,158,11,.04),var(--surface) 40%)} .v1-rc .stripe{height:3px;width:100%} .v1-rc .body{padding:12px 10px 14px} .v1-rc.win .trophy{font-size:28px;filter:drop-shadow(0 0 8px rgba(245,158,11,.5));line-height:1;margin-bottom:2px} .v1-rc.win .rank{font-size:24px;font-weight:900;color:#f59e0b;animation:nfCountPulse 3s ease-in-out infinite;font-variant-numeric:tabular-nums;line-height:1.1} .v1-rc.podium{width:140px} .v1-rc.podium .trophy{font-size:20px;line-height:1} .v1-rc.podium .rank{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1} .v1-rc.mid{width:120px} .v1-rc.mid .rank{font-size:20px;font-weight:900;color:var(--s500);font-variant-numeric:tabular-nums;line-height:1.1} .v1-rc.low{width:120px;opacity:.5} .v1-rc.low .rank{font-size:18px;font-weight:900;color:var(--s400);font-variant-numeric:tabular-nums;line-height:1.1} .v1-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .v1-stat-item{text-align:center} .v1-stat-item .val{font-size:20px;font-weight:900} .v1-stat-item .lbl{font-size:9px;color:var(--s400);margin-top:1px} .v1-donut{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;margin:0 auto 4px} .v1-donut::after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--surface)} .v1-donut span{position:relative;z-index:1;font-size:9px;font-weight:800;color:var(--emerald)} .v1-streak-box{margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);background:linear-gradient(135deg,rgba(245,158,11,.06),rgba(239,68,68,.03));border:1px solid rgba(245,158,11,.08);display:flex;align-items:center;gap:10px} .v1-streak-bars{display:flex;align-items:flex-end;gap:2px} .v1-streak-bar{width:3px;border-radius:2px;background:linear-gradient(to top,var(--coin-mid),var(--red));animation:nfStreakFlame 1.5s ease-in-out infinite} .v1-lb-row{display:flex;align-items:center;gap:8px;padding:9px 16px;border-bottom:1px solid var(--border)} .v1-lb-row.me{background:var(--gold-lt);border-left:3px solid var(--gold)} .v1-lb-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff} .v1-entry-bar{height:3px;border-radius:2px;background:var(--border);margin:8px 0 0;overflow:hidden} .v1-entry-bar-fill{height:100%;border-radius:2px} @media(max-width:768px){ .v1-po-banner{flex-wrap:wrap;gap:10px;padding:12px 14px} .v1-po-mults{display:none} } /* ===== MAIN CONTAINER ===== */ .sf-main{max-width:1200px;margin:0 auto;padding:16px} /* ===== HERO ===== */ .sf-hero{text-align:center;padding:40px 16px;margin-bottom:24px} .sf-hero h1{font-size:42px;font-weight:900;letter-spacing:-1px;color:var(--s900);margin-bottom:8px} .sf-hero h1 span{color:var(--gold)} .sf-hero p{font-size:16px;color:var(--s500);max-width:500px;margin:0 auto} .sf-hero-stats{display:flex;justify-content:center;gap:32px;margin-top:24px} .sf-hero-stat{text-align:center} .sf-hero-stat .val{font-size:28px;font-weight:800;color:var(--gold)} .sf-hero-stat .lbl{font-size:12px;color:var(--s400);text-transform:uppercase;letter-spacing:.5px} /* ===== SECTION HEADERS ===== */ .sf-section-hdr{display:flex;align-items:center;gap:10px;margin-bottom:18px} .sf-section-hdr h2{font-size:20px;font-weight:800;color:var(--s900);letter-spacing:-.02em} .sf-section-hdr .badge{background:var(--gold);color:var(--on-accent);font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px} /* ===== CONTEST CARDS ===== */ .fy-contests{display:grid;gap:14px} .fy-contest-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 24px;cursor:pointer;transition:all .15s;max-width:100%;position:relative} .fy-contest-card:hover{transform:translateY(-2px);border-color:var(--border2);box-shadow:0 8px 24px rgba(15,23,42,.10)} .fy-contest-card.has-entry{border-color:rgba(16,185,129,.15);background:rgba(6,182,212,.02)} /* Popular card */ .fy-contest-card.popular{padding:24px;background:linear-gradient(135deg,rgba(230,57,70,.04),rgba(230,57,70,.01));border-color:rgba(230,57,70,.15);box-shadow:0 0 40px rgba(230,57,70,.04),0 12px 30px rgba(15,23,42,.08);overflow:hidden} .fy-contest-card.popular:hover{border-color:rgba(230,57,70,.3);box-shadow:0 0 50px rgba(230,57,70,.06),0 16px 36px rgba(15,23,42,.10)} .fy-contest-card.popular .fy-popular-glow{position:absolute;top:-60px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(230,57,70,.08),transparent 70%);pointer-events:none} .fy-popular-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;background:rgba(230,57,70,.08);border:1px solid rgba(230,57,70,.18);color:var(--gold);font-size:11px;font-weight:700;margin-bottom:10px;letter-spacing:.3px} .fy-popular-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px} .fy-popular-stat{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px 16px} .fy-popular-stat .lbl{font-size:11px;color:var(--s400);font-weight:600;margin-bottom:5px} .fy-popular-stat .val{font-size:22px;font-weight:900} .fy-popular-progress{margin-bottom:16px} .fy-popular-progress .bar{height:8px;background:var(--border);border-radius:999px;overflow:hidden} .fy-popular-progress .fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--emerald));border-radius:999px} .fy-popular-rewards{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap} .fy-popular-reward{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);font-size:14px;font-weight:800} .fy-popular-reward.first{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.15)} .fy-popular-games{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px} .fy-popular-games::-webkit-scrollbar{display:none} .fy-popular-game{flex:0 0 auto;min-width:90px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px;text-align:center;transition:border-color .15s} .fy-popular-game:hover{border-color:var(--border2)} .fy-enter-btn{padding:14px 32px;border-radius:14px;font-size:16px;font-weight:800;background:linear-gradient(180deg,var(--emerald),#059669);color:#fff;border:none;cursor:pointer;box-shadow:0 6px 20px rgba(16,185,129,.3);transition:all .15s;flex-shrink:0} .fy-enter-btn:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(16,185,129,.4)} .fy-enter-btn.euro{background:linear-gradient(180deg,#ff8c00,#ea580c);box-shadow:0 6px 20px rgba(255,140,0,.2)} .fy-enter-btn.euro:hover{box-shadow:0 8px 28px rgba(255,140,0,.3)} .fy-enter-btn.secondary{padding:11px 24px;border-radius:12px;font-size:14px;font-weight:700} .fy-enter-btn.ghost{background:var(--surface2);color:var(--s700);border:1px solid var(--border);box-shadow:none;font-size:14px;font-weight:700;padding:12px 24px} .fy-enter-btn.ghost:hover{border-color:var(--gold);color:var(--gold);box-shadow:none;transform:none} /* Secondary card left border */ .fy-contest-card.secondary{padding:20px 22px 22px 26px} .fy-contest-card.secondary::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold),var(--brand-navy))} .fy-contest-card.secondary.euroleague::before{background:linear-gradient(180deg,#ff8c00,#fb923c)} .fy-contest-card.secondary.soccer-comp::before{background:linear-gradient(180deg,#4ade80,#16a34a)} .fy-enter-btn.soccer-btn{background:linear-gradient(135deg,#4ade80,#16a34a);box-shadow:0 4px 16px rgba(74,222,128,.2)} .fy-enter-btn.soccer-btn:hover{box-shadow:0 8px 28px rgba(74,222,128,.3)} /* Card overlay layers */ .fy-card-wash{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,var(--wash-c,rgba(34,211,238,.04)) 0%,transparent 50%)} .fy-card-ot{position:absolute;font-weight:900;pointer-events:none;color:rgba(15,23,42,.04);font-size:56px;letter-spacing:-2px;right:16px;top:-6px;line-height:1} .fy-card-fi{position:absolute;bottom:14px;right:14px;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--border);animation:cfi 4s ease-in-out infinite;z-index:2} @keyframes cfi{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} /* Top Performances Carousel */ .tp-wrap{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--border);background:var(--surface);margin-bottom:16px} .tp-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1);transform:translateX(calc(var(--tp-idx,0) * -100%))} .tp-slide{min-width:100%;padding:20px;position:relative;overflow:hidden} .tp-wash{position:absolute;inset:0;pointer-events:none} .tp-label{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;position:relative} .tp-card{display:flex;gap:16px;align-items:center;flex-wrap:wrap;position:relative} .tp-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;border:2px solid var(--gold-glow);flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface2)} .tp-content{flex:1;min-width:160px} .tp-name{font-size:16px;font-weight:800;color:var(--s900);margin-bottom:2px} .tp-team{font-size:11px;color:var(--s400);margin-bottom:6px} .tp-stats{display:flex;gap:8px;flex-wrap:wrap} .tp-stat{padding:4px 10px;border-radius:6px;background:var(--surface2);border:1px solid var(--border);text-align:center} .tp-stat .v{font-size:14px;font-weight:800;color:var(--gold)} .tp-stat .l{font-size:8px;color:var(--s400);text-transform:uppercase;letter-spacing:.5px} .tp-fp{margin-left:auto;text-align:center;flex-shrink:0} .tp-fp .v{font-size:32px;font-weight:900;color:var(--gold);line-height:1} .tp-fp .l{font-size:9px;color:var(--s400);margin-top:2px} .tp-arrows{position:absolute;top:50%;left:0;right:0;display:flex;justify-content:space-between;padding:0 8px;transform:translateY(-50%);pointer-events:none;z-index:5} .tp-arr{width:30px;height:30px;border-radius:50%;background:rgba(var(--surface-rgb),.85);backdrop-filter:blur(8px);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:all;color:var(--s500);font-size:16px;transition:all .2s;line-height:1} .tp-arr:hover{background:var(--gold-lt);border-color:var(--gold-glow);color:var(--gold)} .tp-dots{display:flex;justify-content:center;gap:6px;margin-top:10px;margin-bottom:8px} .tp-dot{width:7px;height:7px;border-radius:50%;background:var(--border2);cursor:pointer;transition:all .3s} .tp-dot.active{background:var(--gold);box-shadow:0 0 8px var(--gold-glow);width:20px;border-radius:4px} @media(max-width:640px){ .fy-popular-stats{grid-template-columns:1fr 1fr} .fy-enter-btn{width:100%;text-align:center;padding:14px} .fy-card-ot{font-size:40px;right:10px} .fy-card-fi{width:28px;height:28px;bottom:10px;right:10px;border-radius:8px} .tp-card{flex-direction:column;align-items:flex-start} .tp-fp{margin-left:0;text-align:left} .tp-fp .v{font-size:24px} .tp-slide{padding:16px} .tp-avatar{width:44px;height:44px} .tp-name{font-size:14px} } .fy-contest-hdr{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap} .fy-contest-date{font-size:19px;font-weight:900;color:var(--s900);letter-spacing:-.02em} .fy-contest-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px} .fy-contest-badge.open{background:rgba(16,185,129,.12);color:var(--emerald)} .fy-contest-badge.live{background:rgba(248,113,113,.12);color:var(--red);animation:pulse-badge 2s infinite} .fy-contest-badge.final{background:rgba(107,122,146,.12);color:var(--s400)} .fy-contest-badge.upcoming{background:rgba(96,165,250,.12);color:var(--blue)} @keyframes pulse-badge{0%,100%{opacity:1}50%{opacity:.6}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} @keyframes livePulse{0%,100%{box-shadow:0 0 10px rgba(16,185,129,.2),0 0 30px rgba(16,185,129,.1),0 0 60px rgba(16,185,129,.05)}50%{box-shadow:0 0 15px rgba(16,185,129,.35),0 0 40px rgba(16,185,129,.15),0 0 70px rgba(16,185,129,.08)}} @keyframes liveDot{0%,100%{opacity:1}50%{opacity:.3}} .live-glow{animation:livePulse 2.5s ease-in-out infinite;border-color:rgba(16,185,129,.4) !important} .live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--emerald);animation:liveDot 1.5s infinite} .fy-contest-meta{display:flex;gap:12px;font-size:12px;color:var(--s400);align-items:center;margin-left:auto;flex-wrap:wrap} .fy-contest-meta span{display:flex;align-items:center;gap:4px;white-space:nowrap} .fy-contest-games{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:4px;scrollbar-width:thin;flex-wrap:wrap} .fy-games-toggle{display:none} .fy-game-chip-lobby{flex:0 0 auto;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 10px;font-size:11px;text-align:center;min-width:90px} .fy-game-chip-lobby .teams{font-weight:700;color:var(--s700);white-space:nowrap} .fy-game-chip-lobby .teams .vs{color:var(--s400);font-weight:400;margin:0 2px} .fy-game-chip-lobby .gtime{color:var(--s400);font-size:10px;margin-top:2px} .fy-game-chip-lobby .gtime.live{color:var(--red);font-weight:700} .fy-contest-entry{display:flex;align-items:center;gap:10px;background:var(--gold-lt);border:1px solid rgba(6,182,212,.2);border-radius:var(--r-sm);padding:8px 14px;font-size:12px;margin-bottom:6px;flex-wrap:wrap} .fy-contest-entry .entry-badge{background:rgba(16,185,129,.15);color:var(--emerald);font-weight:700;font-size:11px;padding:3px 10px;border-radius:20px;white-space:nowrap} .fy-contest-entry .entry-top-row{display:flex;align-items:center;justify-content:space-between;width:100%} .fy-contest-entry .picks-row{display:none} .fy-contest-entry .picks-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%} .fy-contest-entry .pick-grid-cell{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px;text-align:center} .fy-contest-entry .pick-grid-cell .pg-pos{font-size:9px;font-weight:800;color:#fff;border-radius:4px;padding:2px 0;margin-bottom:4px;display:block} .fy-contest-entry .pick-grid-cell .pg-name{font-size:12px;font-weight:700;color:var(--s800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fy-contest-entry .pick-grid-cell .pg-fp{font-size:15px;font-weight:800;color:var(--gold);margin-top:4px} .fy-contest-entry .pick-chip{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--s700);white-space:nowrap} .fy-contest-entry .pick-chip img{width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--surface2)} .fy-contest-entry .pick-chip .pos{font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;color:#fff} .fy-contest-entry .entry-fp{margin-left:auto;font-size:18px;font-weight:800;color:var(--emerald)} .fy-contest-entry .entry-fp .lbl{font-size:9px;color:var(--s400);font-weight:400} .fy-contest-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px} .fy-contest-action{padding:8px 20px;border-radius:var(--r-sm);font-size:13px;font-weight:600;background:var(--emerald);color:var(--on-accent);transition:background .15s;white-space:nowrap} .fy-contest-action:hover{background:#059669} .fy-contest-action.entered{background:var(--surface2);color:var(--s700);border:1px solid var(--border)} .fy-contest-lock-timer{font-size:12px;font-weight:600;color:var(--s500);white-space:nowrap} .fy-contest-fp{font-size:13px;color:var(--s400)} .fy-contest-fp strong{color:var(--gold);font-size:16px} /* ===== CONTEST DETAIL PAGE ===== */ .fy-detail{display:grid;grid-template-columns:1fr 300px;gap:16px;max-width:1600px;margin:0 auto} .fy-detail-main{min-width:0} /* ===== SCORING BAR ===== */ .fy-scoring-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .fy-scoring-pill{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:5px 14px;font-size:12px;display:flex;align-items:center;gap:5px} .fy-scoring-pill .cat{color:var(--s400);font-size:11px} .fy-scoring-pill .val{font-weight:800;color:var(--gold)} /* ===== LEADERBOARD TABLE ===== */ .lb-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .lb-picks-col{display:flex;gap:6px;flex:1;flex-wrap:wrap;min-width:160px} @media(max-width:480px){ .lb-picks-col{display:none} .lb-row-name{min-width:0 !important} } /* ===== GAME STRIP BAR ===== */ .fy-game-bar{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:16px;scrollbar-width:none;flex-wrap:nowrap;-webkit-overflow-scrolling:touch} .fy-game-chip{flex:0 0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 12px;font-size:12px;cursor:pointer;transition:all .15s;white-space:nowrap} .fy-game-chip:hover{border-color:var(--border2)} .fy-game-chip.active{border-color:var(--gold);background:var(--gold-lt);color:var(--gold)} .fy-game-chip .vs{color:var(--s400);margin:0 4px} .fy-game-chip .tm{font-weight:600;color:var(--s700)} /* ===== POSITION FILTERS ===== */ .fy-pos-filters{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .fy-pos-filters::-webkit-scrollbar{display:none} .fy-avail-toggle{margin-left:auto;flex-shrink:0} @media(max-width:600px){ .fy-pos-filters{flex-wrap:wrap;overflow-x:visible} .fy-avail-toggle{margin-left:0;width:100%;margin-top:8px} .fy-avail-toggle button{flex:1} } .fy-pos-btn{padding:6px 16px;border-radius:20px;font-size:12px;font-weight:600;background:var(--surface);border:1px solid var(--border);color:var(--s500);transition:all .15s;flex-shrink:0} .fy-pos-btn:hover{border-color:var(--border2);color:var(--s700)} .fy-pos-btn.active{background:var(--gold);color:var(--on-accent);border-color:var(--gold)} .fy-pos-btn[data-pos="PG"].active{background:#f472b6;border-color:#f472b6} .fy-pos-btn[data-pos="SG"].active{background:#60a5fa;border-color:#60a5fa} .fy-pos-btn[data-pos="SF"].active{background:#34d399;border-color:#34d399} .fy-pos-btn[data-pos="PF"].active{background:#fb923c;border-color:#fb923c} .fy-pos-btn[data-pos="C"].active{background:#a78bfa;border-color:#a78bfa} /* ===== SEARCH BAR ===== */ .fy-search{position:relative;margin-bottom:16px} .fy-search input{width:100%;padding:10px 14px 10px 36px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--s800);font-size:13px} .fy-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--s400);font-size:14px;pointer-events:none} /* ===== SORT CONTROLS ===== */ .fy-sort-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:12px;color:var(--s400)} .fy-sort-btn{padding:4px 10px;border-radius:var(--r-sm);font-size:11px;font-weight:600;color:var(--s500);transition:all .15s} .fy-sort-btn:hover{color:var(--s700)} .fy-sort-btn.active{color:var(--gold);background:var(--gold-lt)} /* ===== PLAYER GRID ===== */ .fy-player-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px} .fy-player-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;transition:all .15s;position:relative} .fy-player-card:hover{border-color:var(--border2);box-shadow:var(--sh)} .fy-player-card.selected{border-color:var(--gold);background:var(--gold-lt);box-shadow:0 0 0 1px var(--gold)} .fy-player-card.injured{opacity:.5} .fy-player-card.disabled{opacity:.35} .fy-player-card.disabled .fy-card-action{pointer-events:none} .fy-player-card .fy-card-top{display:flex;gap:12px;align-items:center} .fy-player-card .fy-card-matchup{font-size:10px;color:var(--s400);margin-left:auto;white-space:nowrap} .fy-player-headshot{width:52px;height:52px;border-radius:14px;background:var(--surface2);overflow:hidden;flex-shrink:0;border:2px solid var(--border)} .fy-player-headshot img{width:100%;height:100%;object-fit:cover} .fy-player-info{flex:1;min-width:0} .fy-player-name{font-size:15px;font-weight:800;color:var(--s900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em} .fy-player-team{font-size:11px;color:var(--s400);display:flex;align-items:center;gap:8px;margin-top:3px} .fy-player-pos{font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;color:#fff} .fy-player-pos.PG{background:#f472b6} .fy-player-pos.SG{background:#60a5fa} .fy-player-pos.SF{background:#34d399} .fy-player-pos.PF{background:#fb923c} .fy-player-pos.C{background:#a78bfa} .fy-player-stats{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap} .fy-player-stat{text-align:center;background:var(--surface2);padding:5px 8px;border-radius:6px;min-width:40px} .fy-player-stat .val{font-size:13px;font-weight:800;color:var(--s800)} .fy-player-stat .lbl{font-size:8px;color:var(--s400);text-transform:uppercase;margin-top:1px} .fy-player-fp{position:absolute;top:16px;right:16px;text-align:right} .fy-player-fp .fp-val{font-size:22px;font-weight:900;color:var(--gold);letter-spacing:-.02em} .fy-player-fp .fp-lbl{font-size:9px;color:var(--s400);text-transform:uppercase;margin-top:2px} .fy-player-select{position:absolute;bottom:12px;right:12px;width:28px;height:28px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .15s;font-size:16px;color:var(--s400)} .fy-player-select:hover{border-color:var(--gold);color:var(--gold)} .fy-player-card.selected .fy-player-select{background:var(--gold);border-color:var(--gold);color:var(--on-accent)} .fy-player-injury{position:absolute;top:12px;left:12px;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px} .fy-player-injury.OUT{background:rgba(248,113,113,.15);color:var(--red)} .fy-player-injury.GTD{background:rgba(251,146,60,.15);color:var(--orange)} .fy-player-injury.DTD{background:rgba(251,146,60,.15);color:var(--orange)} /* ===== HERO CAROUSEL ===== */ .hero-carousel{position:relative;border-radius:12px;overflow:hidden;background:var(--surface);border:1px solid var(--border);min-width:0;max-width:100%;width:100%} .hero-carousel .hc-track{display:flex;transition:transform .5s ease;align-items:stretch;width:100%} .hero-carousel .hc-slide{min-width:100%;max-width:100%;width:100%;padding:20px 20px 40px;position:relative;overflow:hidden;box-sizing:border-box} .hero-carousel .hc-pattern{position:absolute;inset:0;opacity:.04;background-image:repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(15,23,42,.15) 20px,rgba(15,23,42,.15) 21px);pointer-events:none} .hero-carousel .hc-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5} .hero-carousel .hc-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);cursor:pointer;transition:all .2s;border:none;padding:0} .hero-carousel .hc-dot.active{background:var(--gold);width:24px;border-radius:4px} .hero-carousel .hc-arrow{display:none} .hero-carousel .hc-track{cursor:grab} .hero-carousel .hc-track.dragging{cursor:grabbing;transition:none} /* Slide entrance animations */ .hc-anim{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease} .hc-slide.active .hc-anim{opacity:1;transform:translateY(0)} .hc-slide.active .hc-anim.d1{transition-delay:.1s}.hc-slide.active .hc-anim.d2{transition-delay:.2s} .hc-slide.active .hc-anim.d3{transition-delay:.35s}.hc-slide.active .hc-anim.d4{transition-delay:.5s} .hc-slide.active .hc-anim.d5{transition-delay:.65s}.hc-slide.active .hc-anim.d6{transition-delay:.8s} /* Typewriter hero */ .hc-typed{font-size:clamp(26px,4vw,40px);font-weight:900;color:var(--s900);line-height:1.05;letter-spacing:-.04em;min-height:1.1em;overflow:hidden} .hc-typed .cursor{display:inline-block;width:3px;height:.8em;background:var(--gold);margin-left:3px;vertical-align:text-bottom;animation:hcBlink 1s step-end infinite} .hc-typed.done .cursor{display:none} .hc-typed .accent{color:var(--gold)} @keyframes hcBlink{50%{opacity:0}} /* Stats count-up row */ .hc-stats-row{display:flex;gap:8px;flex-wrap:wrap} .hc-stat-box{flex:1;min-width:60px;padding:10px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;text-align:center} .hc-stat-num{font-size:18px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums} .hc-stat-label{font-size:9px;color:var(--s400);text-transform:uppercase;letter-spacing:.3px;margin-top:1px} /* Feature tags that pop in */ .hc-ftag{padding:6px 12px;border-radius:8px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;gap:5px;opacity:0;transform:scale(.85);transition:all .35s ease} .hc-ftag.pop{opacity:1;transform:scale(1)} /* Step progress bars */ .hc-step-card{flex:1;min-width:80px;padding:14px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;text-align:center;position:relative;overflow:hidden;transition:border-color .3s} .hc-step-card:hover{border-color:rgba(34,211,238,.12)} .hc-step-bar{position:absolute;bottom:0;left:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--emerald));width:0;transition:width 1.2s ease} .hc-slide.active .hc-step-card .hc-step-bar{width:100%} .hc-slide.active .hc-step-card:nth-child(1) .hc-step-bar{transition-delay:.6s} .hc-slide.active .hc-step-card:nth-child(2) .hc-step-bar{transition-delay:.9s} .hc-slide.active .hc-step-card:nth-child(3) .hc-step-bar{transition-delay:1.2s} /* Trust row */ .hc-trust{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px} .hc-trust span{font-size:10px;color:var(--s500);display:flex;align-items:center;gap:4px} .hc-trust .ck{color:var(--emerald);font-weight:700} /* Shimmer on CTA */ .hc-cta-shimmer{position:relative;overflow:hidden} .hc-cta-shimmer::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);transform:translateX(-100%);animation:hcShimmer 3.5s ease infinite 2.5s} @keyframes hcShimmer{0%{transform:translateX(-100%)}25%{transform:translateX(100%)}100%{transform:translateX(100%)}} /* Live dot */ .hc-live-dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);animation:hcPulse 2s infinite;flex-shrink:0} @keyframes hcPulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}50%{box-shadow:0 0 0 5px rgba(16,185,129,0)}} /* Dot pattern bg */ .hc-dots-bg{position:absolute;inset:0;opacity:.05;background-image:radial-gradient(circle at 1px 1px,rgba(15,23,42,.3) 1px,transparent 0);background-size:28px 28px;pointer-events:none} /* ===== LINEUP SIDEBAR ===== */ .fy-sidebar{position:sticky;top:calc(var(--hdr) + 16px);max-height:calc(100vh - var(--hdr) - 32px);display:flex;flex-direction:column;align-self:start} .fy-sidebar-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;max-height:100%;scrollbar-width:thin} .fy-sidebar-hdr{padding:16px 18px 12px;display:flex;align-items:center;justify-content:space-between} .fy-sidebar-hdr h3{font-size:17px;font-weight:800;color:var(--s900)} .fy-sidebar-count{font-size:13px;font-weight:600;color:var(--gold)} /* ===== LINEUP SLOTS ===== */ .fy-slots{padding:8px 14px;flex:1;overflow-y:auto} .fy-slot{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r);margin-bottom:6px;min-height:62px;border:1px solid var(--border);background:var(--surface);transition:all .15s} .fy-slot.filled{border-color:var(--gold-dk);background:rgba(6,182,212,.04)} .fy-slot.empty{background:var(--surface);border-color:var(--border)} .fy-slot-pos{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0} .fy-slot-pos.PG{background:#b85a8a} .fy-slot-pos.SG{background:#4a80c4} .fy-slot-pos.SF{background:#2a9d6e} .fy-slot-pos.PF{background:#b8872a} .fy-slot-pos.C{background:#7a6aad} .fy-slot-empty{flex:1;font-size:13px;color:var(--s400)} .fy-slot-player{flex:1;min-width:0;display:flex;align-items:center;gap:12px} .fy-slot-player .slot-img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--surface2)} .fy-slot-player .slot-info{min-width:0} .fy-slot-player .name{font-size:15px;font-weight:800;color:var(--s900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fy-slot-player .meta{font-size:11px;color:var(--s400);margin-top:1px} .fy-slot-fp{font-size:20px;font-weight:900;color:var(--gold);flex-shrink:0;text-align:right} .fy-slot-fp .fp-lbl{font-size:9px;color:var(--s400);font-weight:400;text-align:right} .fy-slot-remove{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--s400);flex-shrink:0;background:var(--surface2);transition:all .1s} .fy-slot-remove:hover{background:rgba(248,113,113,.15);color:var(--red)} /* ===== CAP BAR ===== */ .fy-cap-bar{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:12px} .fy-cap-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .fy-cap-label{font-size:11px;font-weight:600;color:var(--s500);text-transform:uppercase;letter-spacing:.3px} .fy-cap-values{display:flex;align-items:baseline;gap:4px} .fy-cap-used{font-size:18px;font-weight:900;color:var(--gold)} .fy-cap-sep{color:var(--s400);font-size:12px} .fy-cap-total{font-size:14px;font-weight:700;color:var(--s500)} .fy-cap-remain{font-size:11px;font-weight:600} .fy-cap-remain.ok{color:#10b981} .fy-cap-remain.warn{color:#eab308} .fy-cap-remain.over{color:#f87171} .fy-cap-progress{height:6px;border-radius:3px;background:var(--surface2);overflow:hidden} .fy-cap-fill{height:100%;border-radius:3px;transition:width .3s} .fy-cap-fill.ok{background:linear-gradient(90deg,var(--gold-dk),var(--gold))} .fy-cap-fill.warn{background:linear-gradient(90deg,#eab308,#f59e0b)} .fy-cap-fill.over{background:linear-gradient(90deg,#ef4444,#f87171)} .fy-cap-sidebar{margin:8px 12px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)} .fy-cap-sidebar .fy-cap-header{margin-bottom:4px} .fy-cap-sidebar .fy-cap-used{font-size:16px} .fy-cap-sidebar .fy-cap-total{font-size:13px} .fy-cap-sidebar .fy-cap-remain{font-size:11px} .fy-cap-sidebar .fy-cap-progress{margin-top:6px} .fy-player-card.over-cap{opacity:.4} .fy-player-card .fy-card-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:auto} .fy-player-card .fy-card-proj{font-size:12px;font-weight:700;color:var(--gold)} .fy-player-card .fy-card-proj.over{color:var(--red);font-weight:600} .fy-player-card .fy-card-action{padding:4px 14px;border-radius:var(--r-sm);font-size:12px;font-weight:600;border:1px solid var(--border);color:var(--s700);background:var(--surface2);transition:all .15s;cursor:pointer} .fy-player-card .fy-card-action:hover{border-color:var(--gold);color:var(--gold)} .fy-player-card .fy-card-action.over-cap-btn{color:var(--s400);border-color:var(--border);cursor:default} .fy-player-card.selected .fy-card-action{background:var(--gold);border-color:var(--gold);color:var(--on-accent)} .fy-recent-games{display:flex;gap:4px;margin-top:2px} .fy-recent-game{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:5px 4px;text-align:center;font-size:10px} .fy-recent-game .rg-opp{font-weight:700;color:var(--s700);font-size:10px} .fy-recent-game .rg-result{font-size:9px;font-weight:700} .fy-recent-game .rg-result.W{color:var(--emerald)}.fy-recent-game .rg-result.L{color:var(--red)} .fy-recent-game .rg-fp{font-size:14px;font-weight:800;color:var(--gold);margin:2px 0} .fy-recent-game .rg-sub{font-size:9px;color:var(--s400)} .fy-cc-cap-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:50px;font-size:10px;font-weight:700;background:rgba(234,179,8,.1);border:1px solid rgba(234,179,8,.15);color:#eab308} /* ===== LOCK IN BUTTON ===== */ .fy-lock-btn{margin:12px 16px 16px;padding:12px;border-radius:var(--r-sm);font-size:14px;font-weight:700;text-align:center;transition:all .15s} .fy-lock-btn.ready{background:var(--emerald);color:var(--on-accent);cursor:pointer} .fy-lock-btn.ready:hover{background:#059669} .fy-lock-btn.disabled{background:var(--surface2);color:var(--s400);cursor:not-allowed} .fy-lock-btn.locked{background:rgba(16,185,129,.12);color:var(--emerald);cursor:default} /* ===== LEADERBOARD ===== */ .fy-lb-table{width:100%;border-collapse:collapse} .fy-lb-table th{text-align:left;padding:10px 12px;font-size:11px;font-weight:600;color:var(--s400);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--surface)} .fy-lb-table td{padding:10px 12px;border-bottom:1px solid var(--border)} .fy-lb-row{transition:background .1s} .fy-lb-row:hover{background:var(--surface2)} .fy-lb-row.me{background:var(--gold-lt)} .fy-lb-rank{font-weight:700;color:var(--s800);width:40px;font-size:16px} .fy-lb-rank.top1{color:var(--gold)} .fy-lb-rank.top3{color:var(--orange)} .fy-lb-user{display:flex;align-items:center;gap:8px} .fy-lb-avatar{width:28px;height:28px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:var(--s500)} .fy-lb-name{font-weight:600;color:var(--s800);font-size:13px} .fy-lb-picks{display:flex;gap:4px} .fy-lb-pick{width:28px;height:28px;border-radius:50%;overflow:hidden;border:2px solid var(--border);background:var(--surface2)} .fy-lb-pick img{width:100%;height:100%;object-fit:cover} .fy-lb-pick.hidden{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--s400)} .fy-lb-fp{font-size:16px;font-weight:800;color:var(--gold);text-align:right} .fy-lb-fp.pending{color:var(--s400)} /* ===== BACK BUTTON ===== */ .fy-back{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--s500);margin-bottom:16px;transition:all .15s;cursor:pointer} .fy-back:hover{color:var(--s700);background:var(--surface2)} /* ===== RECEIPT / CONFIRMATION ===== */ .fy-receipt{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:24px;text-align:center;max-width:400px;margin:0 auto} .fy-receipt-icon{font-size:48px;margin-bottom:12px} .fy-receipt h3{font-size:18px;font-weight:700;color:var(--s900);margin-bottom:4px} .fy-receipt p{font-size:13px;color:var(--s400);margin-bottom:16px} .fy-receipt-picks{display:flex;justify-content:center;gap:8px;margin-bottom:16px} .fy-receipt-pick{text-align:center} .fy-receipt-pick img{width:40px;height:40px;border-radius:50%;border:2px solid var(--gold);background:var(--surface2);margin-bottom:4px} .fy-receipt-pick .name{font-size:10px;color:var(--s500);max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ===== AUTH MODALS ===== */ .sf-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)} .sf-modal-overlay.show{display:flex} .sf-modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:32px;width:100%;max-width:380px;position:relative} .sf-modal h2{font-size:20px;font-weight:800;color:var(--s900);margin-bottom:4px;text-align:center} .sf-modal .subtitle{font-size:13px;color:var(--s400);text-align:center;margin-bottom:24px} .sf-modal-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--s400);transition:all .1s} .sf-modal-close:hover{background:var(--surface2);color:var(--s700)} .sf-form-group{margin-bottom:16px} .sf-form-group label{display:block;font-size:12px;font-weight:600;color:var(--s500);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px} .sf-form-group input{width:100%} .sf-form-submit{width:100%;padding:12px;border-radius:var(--r-sm);font-size:14px;font-weight:700;background:var(--emerald);color:var(--on-accent);transition:background .15s} .sf-form-submit:hover{background:#059669} .sf-form-switch{text-align:center;margin-top:16px;font-size:13px;color:var(--s400)} .sf-form-switch a{cursor:pointer;color:var(--gold);font-weight:600} .sf-form-error{color:var(--red);font-size:12px;text-align:center;margin-bottom:12px;display:none} .sf-form-error.show{display:block} /* ===== ADMIN PAGE ===== */ .fy-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:16px} .fy-admin-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden} .fy-admin-card-hdr{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .fy-admin-card-hdr h3{font-size:14px;font-weight:700;color:var(--s900)} .fy-admin-card-body{padding:16px} .fy-admin-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)} .fy-admin-row:last-child{border-bottom:none} .fy-admin-row .lbl{font-size:13px;color:var(--s500)} .fy-admin-row input{width:80px;text-align:center;padding:6px 8px;font-size:13px} .fy-admin-btn{padding:8px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;transition:all .15s} .fy-admin-btn.primary{background:var(--emerald);color:var(--on-accent)} .fy-admin-btn.primary:hover{background:#059669} .fy-admin-btn.secondary{background:var(--surface2);color:var(--s700);border:1px solid var(--border)} .fy-admin-btn.secondary:hover{border-color:var(--border2)} .fy-admin-btn.danger{background:rgba(248,113,113,.12);color:var(--red)} .tog{position:absolute;inset:0;border-radius:10px;background:var(--border2);transition:.2s} .tog::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s} .tog.on{background:var(--gold)}.tog.on::after{transform:translateX(16px)} .fy-admin-btn.danger:hover{background:rgba(248,113,113,.2)} .fy-admin-status{display:flex;align-items:center;gap:6px;font-size:12px} .fy-admin-status .dot{width:8px;height:8px;border-radius:50%} .fy-admin-status .dot.green{background:var(--emerald)} .fy-admin-status .dot.red{background:var(--red)} .fy-admin-status .dot.yellow{background:var(--orange)} /* contest create form */ .fy-admin-form{display:flex;flex-direction:column;gap:12px} .fy-admin-form input,.fy-admin-form select{width:100%} .fy-admin-form .row{display:flex;gap:8px} .fy-admin-form .row > *{flex:1} /* ===== HISTORY PAGE ===== */ .fy-history-list{display:flex;flex-direction:column;gap:10px} .fy-history-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;transition:all .15s} .fy-history-card:hover{border-color:var(--border2);box-shadow:var(--sh)} .fy-history-date{font-size:14px;font-weight:700;color:var(--s800)} .fy-history-picks{display:flex;gap:4px} .fy-history-fp{font-size:18px;font-weight:800;color:var(--gold)} .fy-history-rank{font-size:13px;color:var(--s500)} /* ===== TOAST ===== */ .sf-toast-container{position:fixed;bottom:20px;right:20px;z-index:600;display:flex;flex-direction:column;gap:8px;max-width:340px} .sf-toast{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 20px rgba(15,23,42,.12);animation:toast-in .3s ease} .sf-toast.success{border-left:3px solid var(--emerald)} .sf-toast.error{border-left:3px solid var(--red)} .sf-toast.info{border-left:3px solid var(--blue)} .sf-toast-icon{font-size:18px;flex-shrink:0} .sf-toast-msg{font-size:13px;color:var(--s800);flex:1} @keyframes toast-in{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}} @keyframes toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(40px)}} /* Micro-interactions */ .fy-player-card .mi-flash{position:absolute;inset:0;background:var(--emerald);opacity:0;pointer-events:none;border-radius:inherit;transition:opacity .15s} .fy-player-card.mi-selecting{animation:miBounce .4s ease} .fy-player-card.mi-selecting .mi-flash{opacity:.1} @keyframes miBounce{0%{transform:scale(1)}30%{transform:scale(1.025)}60%{transform:scale(.985)}100%{transform:scale(1)}} .fy-slot.mi-filling{animation:miSlotFill .5s ease} @keyframes miSlotFill{0%{transform:scale(1)}40%{transform:scale(1.02);background:rgba(16,185,129,.06)}100%{transform:scale(1)}} /* Save success overlay */ .mi-success-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:rgba(10,14,20,.85);z-index:500;opacity:0;pointer-events:none;transition:opacity .3s} .mi-success-overlay.show{opacity:1;pointer-events:all} .mi-success-check{width:72px;height:72px;border-radius:50%;background:var(--emerald);display:flex;align-items:center;justify-content:center;font-size:36px;color:#fff;animation:miCheckPop .5s ease both;opacity:0} .mi-success-overlay.show .mi-success-check{opacity:1} @keyframes miCheckPop{0%{transform:scale(0) rotate(-45deg);opacity:0}60%{transform:scale(1.15) rotate(5deg);opacity:1}100%{transform:scale(1) rotate(0)}} .mi-success-text{font-size:20px;font-weight:800;color:var(--s900);margin-top:16px;opacity:0} .mi-success-overlay.show .mi-success-text{animation:miFadeUp .4s ease both .2s} .mi-success-sub{font-size:14px;color:var(--s400);margin-top:6px;opacity:0} .mi-success-overlay.show .mi-success-sub{animation:miFadeUp .4s ease both .35s} @keyframes miFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* Confetti */ .mi-confetti-wrap{position:fixed;inset:0;pointer-events:none;z-index:501;overflow:hidden} .mi-confetti{position:absolute;border-radius:2px;opacity:0} .mi-confetti.pop{animation:miConfetti 1.4s ease-out forwards} @keyframes miConfetti{0%{opacity:1;transform:translateY(0) rotate(0) scale(1)}15%{opacity:1}100%{opacity:0;transform:translateY(200px) rotate(720deg) scale(.2)}} /* Credit float */ .mi-credit-float{position:fixed;font-size:18px;font-weight:900;color:#f59e0b;opacity:0;pointer-events:none;z-index:502} .mi-credit-float.show{animation:miCreditFloat 1.2s ease-out forwards} @keyframes miCreditFloat{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.8}100%{opacity:0;transform:translateY(-50px) scale(1.2)}} @media(max-width:768px){.sf-toast-container{left:12px;right:12px;bottom:80px;max-width:none}} /* ===== EMPTY STATE ===== */ .sf-empty{text-align:center;padding:48px 24px;color:var(--s400);position:relative;overflow:hidden} .sf-empty-glow{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--gold-glow),transparent 70%);opacity:.3;pointer-events:none} .sf-empty-ill{width:80px;height:80px;border-radius:50%;background:var(--surface2);border:2px dashed var(--border2);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;animation:emFloat 4s ease-in-out infinite} @keyframes emFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} .sf-empty-icon{font-size:48px;margin-bottom:12px;opacity:.5} .sf-empty h3{font-size:18px;font-weight:800;color:var(--s800);margin-bottom:8px;position:relative} .sf-empty p{font-size:14px;color:var(--s400);line-height:1.6;max-width:360px;margin:0 auto 20px;position:relative} .sf-empty .sf-empty-cta{display:inline-block;padding:12px 28px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;text-decoration:none;position:relative;background:var(--emerald);color:#fff;box-shadow:0 4px 16px rgba(16,185,129,.2);border:none} .sf-empty .sf-empty-cta:hover{box-shadow:0 6px 24px rgba(16,185,129,.3);transform:translateY(-2px)} .sf-empty .sf-empty-cta-secondary{background:var(--gold-lt);color:var(--gold);border:1px solid var(--gold-glow);box-shadow:none;padding:8px 16px;font-size:12px} .sf-empty .sf-empty-cta-secondary:hover{background:var(--gold-glow);transform:none;box-shadow:none} .sf-empty .sf-empty-hint{font-size:11px;color:var(--s400);margin-top:12px;position:relative} .sf-empty .sf-empty-steps{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap;position:relative} .sf-empty .sf-empty-step{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--s500)} .sf-empty .sf-empty-step-num{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0} /* Welcome banner */ .sf-welcome-banner{background:linear-gradient(135deg,rgba(34,211,238,.06),rgba(16,185,129,.03));border:1px solid rgba(34,211,238,.15);border-radius:16px;padding:20px 24px;display:flex;align-items:center;gap:16px;margin-bottom:20px;position:relative;overflow:hidden;animation:sfWbIn .5s ease both} @keyframes sfWbIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}} .sf-wb-glow{position:absolute;top:-30px;right:-20px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.08),transparent 70%);pointer-events:none} .sf-wb-icon{width:48px;height:48px;border-radius:14px;background:var(--gold-lt);border:1px solid rgba(34,211,238,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:sfWbPulse 3s ease-in-out infinite} @keyframes sfWbPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.15)}50%{box-shadow:0 0 0 8px rgba(34,211,238,0)}} .sf-wb-text{flex:1;position:relative} .sf-wb-title{font-size:15px;font-weight:800;color:var(--s900);margin-bottom:3px} .sf-wb-desc{font-size:12px;color:var(--s400);line-height:1.5} .sf-wb-cta{padding:10px 20px;border-radius:10px;font-size:13px;font-weight:700;background:var(--emerald);color:#fff;border:none;cursor:pointer;flex-shrink:0;transition:all .2s;position:relative} .sf-wb-cta:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(16,185,129,.25)} .sf-wb-dismiss{position:absolute;top:8px;right:10px;color:var(--s400);font-size:16px;cursor:pointer;background:none;border:none;opacity:.5;transition:opacity .15s;z-index:2} .sf-wb-dismiss:hover{opacity:1} @media(max-width:768px){.sf-welcome-banner{flex-direction:column;text-align:center;padding:20px 16px}.sf-wb-cta{width:100%}} /* Mobile-first card design */ .fy-mobile-cta{display:none} .fy-card-action-mobile{display:none} @media(max-width:768px){ .fy-mobile-cta{display:block;width:100%;padding:14px;border-radius:12px;font-size:15px;font-weight:800;text-align:center;border:none;cursor:pointer;margin-top:12px;-webkit-tap-highlight-color:transparent;position:relative} .fy-mobile-cta.primary{background:var(--emerald);color:#fff;box-shadow:0 4px 16px rgba(16,185,129,.2)} .fy-mobile-cta.ghost{background:var(--surface2);color:var(--s700);border:1px solid var(--border)} .fy-mobile-cta.euro{background:linear-gradient(135deg,#ff8c00,#ea580c);color:#fff;box-shadow:0 4px 16px rgba(255,140,0,.2)} .fy-mobile-cta.soccer{background:linear-gradient(135deg,#4ade80,#16a34a);color:#fff;box-shadow:0 4px 16px rgba(74,222,128,.2)} .fy-contest-card .fy-desktop-btn{display:none !important} .fy-card-action-mobile{display:block;width:100%;padding:12px;border-radius:10px;font-size:14px;font-weight:700;text-align:center;border:none;cursor:pointer;margin-top:8px;-webkit-tap-highlight-color:transparent} .fy-card-action-mobile.select{background:var(--gold-lt);border:1px solid var(--gold-glow);color:var(--gold)} .fy-card-action-mobile.selected{background:var(--gold);border:1px solid var(--gold);color:var(--bg)} .fy-card-action-mobile.over-cap{background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.15);color:var(--red)} .fy-player-card .fy-card-action{display:none !important} } /* Getting started checklist */ .sf-checklist{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden} .sf-cl-hdr{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .sf-cl-hdr h3{font-size:14px;font-weight:800;color:var(--s900)} .sf-cl-prog{display:flex;align-items:center;gap:8px} .sf-cl-prog-bar{width:60px;height:5px;border-radius:3px;background:var(--surface2);overflow:hidden} .sf-cl-prog-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--emerald));transition:width .5s} .sf-cl-prog-text{font-size:10px;font-weight:700;color:var(--gold)} .sf-cl-items{padding:6px 10px} .sf-cl-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;margin-bottom:2px;transition:background .15s;cursor:pointer} .sf-cl-item:hover{background:var(--surface2)} .sf-cl-check{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;transition:all .2s} .sf-cl-check.pending{background:var(--surface2);border:2px solid var(--border2);color:transparent} .sf-cl-check.done{background:var(--emerald);border:2px solid var(--emerald);color:#fff} .sf-cl-check.current{background:var(--gold-lt);border:2px solid var(--gold);color:var(--gold);animation:sfClPulse 2s ease-in-out infinite} @keyframes sfClPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.2)}50%{box-shadow:0 0 0 5px rgba(34,211,238,0)}} .sf-cl-info{flex:1;min-width:0} .sf-cl-title{font-size:12px;font-weight:700;color:var(--s900)} .sf-cl-title.done-text{color:var(--s500);text-decoration:line-through} .sf-cl-sub{font-size:10px;color:var(--s400);margin-top:1px} .sf-cl-reward{font-size:10px;font-weight:700;color:#f59e0b;display:flex;align-items:center;gap:3px;flex-shrink:0} .sf-cl-footer{padding:10px 16px;border-top:1px solid var(--border);text-align:center;font-size:10px;color:var(--s400)} .sf-cl-footer strong{color:var(--gold)} /* Live activity feed */ .sf-feed{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden} .sf-feed-hdr{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .sf-feed-hdr h3{font-size:14px;font-weight:800;color:var(--s900)} .sf-feed-live{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--emerald)} .sf-feed-items{max-height:220px;overflow-y:auto;scrollbar-width:thin} .sf-feed-item{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--border);font-size:11px} .sf-feed-item:last-child{border:none} .sf-feed-icon{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px} .sf-feed-text{flex:1;color:var(--s500);line-height:1.4} .sf-feed-text strong{color:var(--s900);font-weight:700} .sf-feed-text .accent{color:var(--gold);font-weight:700} .sf-feed-text .green{color:var(--emerald);font-weight:700} .sf-feed-time{font-size:9px;color:var(--s400);flex-shrink:0;white-space:nowrap} /* Results ticker */ .sf-ticker{overflow:hidden;border-radius:10px;background:var(--surface);border:1px solid var(--border);margin-bottom:14px;position:relative} .sf-ticker-label{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;padding:0 12px;background:linear-gradient(90deg,var(--surface) 80%,transparent);z-index:2;font-size:9px;font-weight:800;color:var(--emerald);letter-spacing:1px;text-transform:uppercase} .sf-ticker-track{display:flex;animation:sfTicker 30s linear infinite;padding:9px 0 9px 80px} @keyframes sfTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}} .sf-ticker-item{display:flex;align-items:center;gap:5px;padding:0 18px;white-space:nowrap;font-size:11px;color:var(--s500)} .sf-ticker-item strong{color:var(--s900)} .sf-ticker-item .t-rank{color:var(--emerald);font-weight:700} .sf-ticker-item .t-fp{color:var(--gold);font-weight:800} .sf-ticker-sep{color:var(--border2);margin:0 2px} /* Entry avatars on contest cards */ .fy-entry-avatars{display:flex;align-items:center;gap:0;margin-top:8px;position:relative} .fy-ea{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);margin-left:-6px;overflow:hidden;background:var(--surface2);flex-shrink:0} .fy-ea:first-child{margin-left:0} .fy-ea-more{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);margin-left:-6px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:var(--s400)} .fy-ea-text{font-size:10px;color:var(--s400);margin-left:8px} /* ===== V1 LOBBY UPGRADES ===== */ .v1-po-banner{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:12px;background:var(--surface);border:1px solid rgba(245,158,11,.15);cursor:pointer;position:relative;overflow:hidden;margin-bottom:16px;transition:border-color .2s} .v1-po-banner:hover{border-color:rgba(245,158,11,.35)} .v1-po-banner .glow{position:absolute;top:-30px;right:-30px;width:100px;height:100px;background:radial-gradient(circle,rgba(245,158,11,.1),transparent 70%);pointer-events:none} .v1-po-mults{display:flex;align-items:center;gap:5px} .v1-po-mult{padding:4px 8px;border-radius:6px;font-size:12px;font-weight:800;text-align:center;line-height:1.2} .v1-po-mult .rd{font-size:7px;font-weight:700;letter-spacing:.5px;margin-top:1px;opacity:.7} @media(max-width:700px){.v1-po-mults{display:none}.v1-po-banner button{padding:8px 14px}} .v1-results-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .v1-results-scroll::-webkit-scrollbar{display:none} .v1-stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;text-align:center} .v1-stat-item{display:flex;flex-direction:column;align-items:center;gap:4px} .v1-donut{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative} .v1-donut span{font-size:11px;font-weight:800;color:var(--s900);background:var(--surface);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center} .v1-streak-box{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 12px;border-radius:8px;background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.1)} .v1-streak-bars{display:flex;align-items:flex-end;gap:3px;height:22px} .v1-streak-bar{width:4px;border-radius:2px;background:#f59e0b;animation:streakPulse 1.5s ease-in-out infinite alternate} @keyframes streakPulse{0%{opacity:.4}100%{opacity:1}} .v1-lb-row{display:flex;align-items:center;gap:8px;padding:7px 14px;border-bottom:1px solid var(--border);transition:background .12s} .v1-lb-row:hover{background:var(--surface2)} .v1-lb-row.me{background:var(--gold-lt);border-left:3px solid var(--gold)} .v1-entry-bar{height:3px;background:var(--surface2);border-radius:2px;overflow:hidden;margin-bottom:8px} .v1-entry-bar-fill{height:100%;border-radius:2px;transition:width .4s ease} /* ===== LOADING SPINNER ===== */ .sf-spinner{display:flex;align-items:center;justify-content:center;padding:48px} .sf-spinner::after{content:'';width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .6s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ===== TABS ===== */ .fy-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:0} .fy-tab{padding:8px 16px;font-size:13px;font-weight:600;color:var(--s500);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;cursor:pointer} .fy-tab:hover{color:var(--s700)} .fy-tab.active{color:var(--gold);border-bottom-color:var(--gold)} /* ===== MOBILE BAR ===== */ .fy-mobile-pill{display:none;position:fixed;bottom:12px;left:12px;right:12px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:10px 14px;z-index:100;align-items:center;gap:10px;box-shadow:0 -4px 20px rgba(15,23,42,.12)} .fy-mobile-pill-spacer{display:none} .fy-mobile-pill .mp-slots{display:flex;gap:3px} .fy-mobile-pill .mp-slot{width:30px;height:30px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;color:var(--s400);background:var(--surface2)} .fy-mobile-pill .mp-slot.filled{border-color:var(--gold)} .fy-mobile-pill .mp-slot img{width:100%;height:100%;border-radius:50%;object-fit:cover} .fy-mobile-pill .mp-mid{flex:1;text-align:center} .fy-mobile-pill .mp-pts{font-size:18px;font-weight:900;color:var(--gold);line-height:1} .fy-mobile-pill .mp-sub{font-size:9px;color:var(--s400)} .fy-mobile-pill .mp-lock{padding:10px 20px;border-radius:12px;font-size:13px;font-weight:700;background:var(--emerald);color:var(--on-accent);border:none;cursor:pointer} .fy-mobile-pill .mp-lock.disabled{background:var(--surface2);color:var(--s400);cursor:default} .fy-mobile-pill.expanded{flex-direction:column;align-items:stretch;bottom:0 !important;left:0 !important;right:0 !important;border-radius:16px 16px 0 0 !important;padding:0 !important;max-height:80vh;overflow-y:auto} .fy-mobile-lineup-toggle{display:none} /* ===== RESPONSIVE ===== */ @media(max-width:768px){ .sf-hero h1{font-size:28px} .sf-hero-stats{gap:20px} .sf-hero-stat .val{font-size:22px} .fy-detail{grid-template-columns:1fr} .avatar-layout{grid-template-columns:1fr !important;gap:16px !important} .fy-sidebar{position:fixed;bottom:0;left:0;right:0;top:auto;max-height:60vh;z-index:90;display:none;border-radius:var(--r) var(--r) 0 0;box-shadow:0 -4px 20px rgba(15,23,42,.10)} .fy-sidebar{display:none !important} .fy-mobile-pill:not(:empty){display:flex !important} .fy-mobile-pill-spacer{display:block !important} #app{padding-bottom:80px} .hdr-bell-wrap{display:none !important} .lb-picks-mini{display:none !important} .fy-player-grid{grid-template-columns:1fr} .sf-nav{display:none} .fy-admin-grid{grid-template-columns:1fr} .fy-lb-picks{display:none} .live-lineup-desktop{display:none !important} .live-lineup-mobile{display:flex !important} .live-columns{grid-template-columns:1fr !important} .po-team-split{grid-template-columns:1fr !important} .sf-hdr{padding:8px 10px 0} .sf-hdr-inner{height:48px;grid-template-columns:1fr 1fr;padding:0 14px;border-radius:14px} .sf-hdr-left{gap:6px} .sf-hdr-live{display:none} .sf-logo svg{height:34px} .sf-theme-picker{gap:4px} .sf-theme-dot{width:18px;height:18px} .sf-hdr-user .sf-btn-auth{padding:6px 10px;font-size:11px} .sf-hdr-name{display:none} .sf-main{padding:0 8px} .fy-contest-card{padding:14px 16px} .fy-contest-hdr{gap:8px} .fy-contest-date{font-size:16px} .fy-contest-meta{gap:6px;font-size:11px} .fy-player-card{padding:14px} .fy-player-name{font-size:14px} .fy-player-stat{padding:4px 6px;min-width:36px} .fy-player-stat .val{font-size:12px} .fy-player-fp .fp-val{font-size:18px} .fy-slot{padding:10px 12px;min-height:56px} .fy-slot-fp{font-size:16px} .fy-slot-player .name{font-size:13px} .sf-section-hdr h2{font-size:18px} .fy-game-chip-lobby{padding:5px 8px;min-width:75px;font-size:10px} .fy-contest-action{padding:6px 14px;font-size:12px} #cap-bar-container .fy-cap-bar{margin:0 -8px;border-radius:0;border-left:none;border-right:none} .v2-hero-card{padding:16px !important;border-radius:10px !important} .v2-hero-card h1{font-size:24px !important} .v2-hero-card p{font-size:12px !important;max-width:100% !important} .hero-carousel .hc-slide{padding:14px 14px 32px !important;min-height:auto !important} .hero-carousel .hc-slide h1{font-size:20px !important} .hero-carousel .hc-dots{bottom:10px !important} .hc-weekly-grid{grid-template-columns:1fr !important} .hc-weekly-grid .hc-mobile-hide{display:none !important} .hc-mobile-hide{display:none !important} .hc-mobile-only{display:flex !important} .hc-slide .hc-cta{width:100% !important;padding:12px !important;font-size:14px !important;text-align:center !important;box-sizing:border-box} .hc-slide .hc-cta-wrap{flex-direction:column !important;width:100%} .hc-slide .hc-step{padding:10px 12px !important} .hc-slide .hc-step .hc-step-title{font-size:12px !important} .hc-slide .hc-step .hc-step-sub{font-size:10px !important} .hero-carousel .hc-item-row{gap:4px !important} .hero-carousel .hc-item-mini{padding:5px 8px !important;font-size:10px !important} .hc-hero-desc{font-size:12px !important;line-height:1.5 !important;margin-bottom:10px !important} .hc-stats-row{gap:4px !important} .hc-stat-box{padding:8px 4px !important;min-width:0 !important} .hc-stat-num{font-size:14px !important} .hc-stat-label{font-size:8px !important} .hc-ftag{padding:4px 8px !important;font-size:9px !important} .hc-trust{gap:8px !important} .hc-trust span{font-size:9px !important} .hc-typed{font-size:clamp(22px,6vw,32px) !important} .hc-shop-layout{grid-template-columns:1fr !important;gap:10px !important} .hc-shop-grid{display:none !important} .hc-shop-sets-bar{display:none !important} .hc-weekly-logo{display:none !important} .hc-weekly-prizes{gap:3px !important} .hc-weekly-prizes>div{padding:5px 6px !important} .hc-weekly-prizes .hc-prize-big{font-size:14px !important} .hc-weekly-prizes .hc-prize-sm{font-size:12px !important} .rankings-stats{display:none !important} .po-lb-today{max-width:90px !important;gap:3px !important} .po-lb-today img{width:16px !important;height:16px !important} .fy-contest-entry{padding:10px;gap:8px} .fy-contest-entry .picks-grid{gap:4px} .fy-contest-entry .pick-grid-cell{padding:6px 4px;border-radius:6px} .fy-contest-entry .pick-grid-cell .pg-pos{font-size:8px} .fy-contest-entry .pick-grid-cell .pg-name{font-size:9px} .fy-contest-entry .pick-grid-cell .pg-fp{font-size:10px} .fy-contest-entry .entry-fp{font-size:18px} .fy-games-toggle{display:none} .fy-contest-games{display:flex !important;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px} .fy-contest-games::-webkit-scrollbar{display:none} .fy-contest-games[style*="display: flex"]{display:flex !important} #cap-bar-container{position:sticky;top:var(--hdr);z-index:50;margin:0 -16px;padding:0 16px;background:var(--bg)} .live-hero-fp{font-size:64px !important} .profile-stats-row{grid-template-columns:repeat(5,1fr) !important;gap:6px !important;font-size:11px !important} .profile-stats-row > div > div:first-child{font-size:14px !important} } /* ===== LIVE SCORING ===== */ .fy-live-scoreboard{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;margin-bottom:20px;scrollbar-width:thin} .fy-live-game{flex:0 0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 16px;min-width:160px;text-align:center} .fy-live-game.live{border-color:rgba(248,113,113,.3);box-shadow:0 0 12px rgba(248,113,113,.1)} .fy-live-game-teams{display:flex;align-items:center;gap:12px;justify-content:center} .fy-live-game-team{text-align:center} .fy-live-game-team .team-abbr{font-size:13px;font-weight:700;color:var(--s800);display:block} .fy-live-game-team .team-score{font-size:22px;font-weight:800;color:var(--s900)} .fy-live-game-vs{font-size:11px;color:var(--s400);text-transform:uppercase} .fy-live-picks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px} .fy-live-pick-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px;transition:border-color .15s} .fy-live-pick-card:hover{border-color:var(--border2)} .fy-live-pick-hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px} .fy-live-pick-img{width:44px;height:44px;border-radius:50%;border:2px solid var(--border);object-fit:cover;background:var(--surface2)} .fy-live-pick-name{font-size:14px;font-weight:700;color:var(--s900)} .fy-live-pick-meta{font-size:11px;color:var(--s400);display:flex;align-items:center;gap:6px;margin-top:1px} .fy-live-pick-fp{margin-left:auto;font-size:20px;font-weight:800;color:var(--gold)} .fy-live-pick-fp span{font-size:11px;font-weight:500;color:var(--s400)} .fy-live-pick-stats{display:flex;gap:8px;flex-wrap:wrap} .fy-live-stat{text-align:center;min-width:36px} .fy-live-stat .val{font-size:14px;font-weight:700;color:var(--s800)} .fy-live-stat .val.neg{color:var(--red)} .fy-live-stat .lbl{font-size:9px;color:var(--s400);text-transform:uppercase} /* ===== PLAYER DETAIL MODAL EXTRAS ===== */ .sf-modal h4{font-size:13px;font-weight:600;color:var(--s700)} @media(max-width:480px){ .sf-main{padding:10px} .sf-hero{padding:16px 10px} .fy-player-stats{gap:4px} .fy-contest-meta{flex-wrap:wrap;gap:8px} .hero-steps{padding:0 !important} .v2-hero-card{padding:12px !important} .v2-hero-card h1{font-size:22px !important} .fy-admin-grid{grid-template-columns:1fr !important} .fy-live-picks-grid{grid-template-columns:1fr !important} .fy-contest-entry .picks-row{display:none} .fy-contest-entry .picks-grid{display:grid !important} .sf-hdr-menu button{gap:5px !important} .sf-hdr-menu button span[style*="font-size:12px"]{font-size:11px !important} .fy-pos-btn{min-height:36px} .rankings-stats{display:none !important} .po-lb-today{max-width:90px !important;gap:3px !important} .po-lb-today img{width:16px !important;height:16px !important} .fy-game-bar{gap:4px} .fy-game-chip{padding:6px 8px;font-size:10px} .fy-search input{font-size:14px} .live-hero-fp{font-size:56px !important} .profile-stats-row{grid-template-columns:repeat(3,1fr) !important;gap:8px !important} } @keyframes legendaryGlow{0%,100%{box-shadow:0 0 8px rgba(245,158,11,.3),0 0 20px rgba(245,158,11,.1)}50%{box-shadow:0 0 16px rgba(245,158,11,.5),0 0 30px rgba(245,158,11,.2)}} @keyframes epicPulse{0%,100%{border-color:rgba(167,139,250,.3)}50%{border-color:rgba(167,139,250,.7)}} @keyframes shineSwipe{0%{background-position:-200% 0}100%{background-position:200% 0}} .rarity-legendary{animation:legendaryGlow 3s ease-in-out infinite} .rarity-epic{animation:epicPulse 2s ease-in-out infinite} .shop-item:hover .shine-overlay{background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);background-size:200% 100%;animation:shineSwipe 0.8s ease-out} /* ===== AVATAR & ITEM ANIMATIONS ===== */ @keyframes av-glow-purple{0%,100%{box-shadow:0 0 8px rgba(167,139,250,.3),0 0 20px rgba(167,139,250,.1)}50%{box-shadow:0 0 16px rgba(167,139,250,.6),0 0 40px rgba(167,139,250,.2)}} @keyframes av-glow-gold{0%,100%{box-shadow:0 0 8px rgba(245,158,11,.3),0 0 20px rgba(245,158,11,.1)}50%{box-shadow:0 0 18px rgba(245,158,11,.6),0 0 44px rgba(245,158,11,.2)}} @keyframes av-glow-emerald{0%,100%{box-shadow:0 0 6px rgba(16,185,129,.25),0 0 16px rgba(16,185,129,.08)}50%{box-shadow:0 0 14px rgba(16,185,129,.5),0 0 36px rgba(16,185,129,.15)}} @keyframes av-glow-red{0%,100%{box-shadow:0 0 6px rgba(248,113,113,.25),0 0 16px rgba(248,113,113,.08)}50%{box-shadow:0 0 14px rgba(248,113,113,.5),0 0 36px rgba(248,113,113,.15)}} @keyframes av-shimmer-sweep{0%{left:-60%}100%{left:160%}} @keyframes av-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes av-border-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} @keyframes av-diamond-flash{0%,70%,100%{opacity:0;transform:scale(.5)}80%{opacity:1;transform:scale(1.2)}90%{opacity:.5;transform:scale(.8)}} @keyframes av-ember-rise{0%{opacity:0;transform:translateY(0) scale(1)}15%{opacity:1}100%{opacity:0;transform:translateY(-40px) translateX(6px) scale(0)}} @keyframes av-sparkle-float{0%{opacity:0;transform:translate(0,0) scale(0)}20%{opacity:1;transform:translate(var(--sx),var(--sy)) scale(1)}80%{opacity:1;transform:translate(var(--ex),var(--ey)) scale(1)}100%{opacity:0;transform:translate(var(--ex),var(--ey)) scale(0)}} @keyframes phantom-vortex{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes phantom-wisp{0%{opacity:0;transform:translateY(0)}50%{opacity:.6}100%{opacity:0;transform:translateY(-20px)}} @keyframes phantom-pulse{0%,100%{opacity:.6}50%{opacity:1}} @keyframes phantom-shimmer{0%{left:-60%}100%{left:160%}} .phantom-avatar-float{animation:av-float 3s ease-in-out infinite} .phantom-glow{animation:av-glow-purple 3s ease-in-out infinite} .av-glow-purple{animation:av-glow-purple 2.5s ease-in-out infinite} .av-glow-gold{animation:av-glow-gold 2.5s ease-in-out infinite} .av-glow-emerald{animation:av-glow-emerald 2.5s ease-in-out infinite} .av-glow-red{animation:av-glow-red 2.5s ease-in-out infinite} .av-float{animation:av-float 2.8s ease-in-out infinite} .av-shimmer{position:relative;overflow:hidden} .av-shimmer::after{content:'';position:absolute;top:-20%;left:-60%;width:40%;height:140%;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.15) 45%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.15) 55%,transparent 70%);animation:av-shimmer-sweep 3s ease-in-out infinite;border-radius:50%;pointer-events:none} @keyframes av-border-color-cycle{0%{border-color:#a78bfa}25%{border-color:#22d3ee}50%{border-color:#10b981}75%{border-color:#f59e0b}100%{border-color:#a78bfa}} /* ── Homepage animations ── */ /* 1. Staggered fade-in */ @keyframes lobby-fade-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} .lobby-anim{opacity:0;animation:lobby-fade-in .5s ease forwards} .lobby-anim.la1{animation-delay:.05s}.lobby-anim.la2{animation-delay:.12s} .lobby-anim.la3{animation-delay:.19s}.lobby-anim.la4{animation-delay:.26s} .lobby-anim.la5{animation-delay:.33s}.lobby-anim.la6{animation-delay:.40s} .lobby-anim.la7{animation-delay:.47s}.lobby-anim.la8{animation-delay:.54s} /* 2. Contest card hover lift + glow */ .fy-contest-card{transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s ease,border-color .2s ease} .fy-contest-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)} .fy-contest-card:active{transform:scale(.98);transition-duration:.1s} .fy-contest-card[data-status="open"]:hover,.fy-contest-card[data-status="upcoming"]:hover{box-shadow:0 6px 24px rgba(245,158,11,.12);border-color:rgba(245,158,11,.3)} .fy-contest-card[data-status="live"]:hover,.fy-contest-card[data-status="locked"]:hover,.fy-contest-card[data-status="scoring"]:hover{box-shadow:0 6px 24px rgba(16,185,129,.15);border-color:rgba(16,185,129,.4)} .fy-contest-card[data-status="final"]:hover{box-shadow:0 6px 20px rgba(15,23,42,.06);border-color:var(--border2)} /* 3. Live pulse indicator */ @keyframes live-dot-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(16,185,129,.4)}50%{opacity:.5;box-shadow:0 0 0 6px rgba(16,185,129,0)}} .live-dot-pulse{animation:live-dot-pulse 2s ease-in-out infinite} @keyframes live-card-glow{0%,100%{box-shadow:0 0 0 rgba(16,185,129,0)}50%{box-shadow:0 0 20px rgba(16,185,129,.08),0 0 40px rgba(16,185,129,.04)}} .live-card-glow{animation:live-card-glow 3s ease-in-out infinite} /* 5. Sidebar micro-animations */ @keyframes shimmer-sweep{0%{left:-60%}100%{left:160%}} .sidebar-shimmer{position:relative;overflow:hidden} .sidebar-shimmer::after{content:'';position:absolute;top:-20%;left:-60%;width:40%;height:140%;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.08) 55%,transparent 65%);animation:shimmer-sweep 4s ease-in-out infinite;pointer-events:none} @keyframes medal-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}} .medal-pulse{animation:medal-pulse 2.5s ease-in-out infinite} @keyframes step-pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:1}} .step-pop{animation:step-pop .4s ease forwards;opacity:0} .step-pop.sp1{animation-delay:.3s}.step-pop.sp2{animation-delay:.5s}.step-pop.sp3{animation-delay:.7s} /* 6. Floating particles */ @keyframes particle-drift{0%{transform:translate(0,0);opacity:0}10%{opacity:var(--p-opacity,.12)}90%{opacity:var(--p-opacity,.12)}100%{transform:translate(var(--p-dx,30px),var(--p-dy,-200px));opacity:0}} .lobby-particle{position:fixed;border-radius:50%;pointer-events:none;animation:particle-drift var(--p-dur,20s) ease-in-out infinite;z-index:0} /* 7. Section header animated underline */ @keyframes header-underline{from{width:0}to{width:100%}} .sf-section-hdr h2{position:relative;display:inline-block} .sf-section-hdr h2::after{content:'';position:absolute;bottom:-3px;left:0;height:2px;width:0;border-radius:1px;background:var(--gold)} .sf-section-hdr.hdr-visible h2::after{animation:header-underline .4s ease forwards} .sf-section-hdr.hdr-live h2::after{background:var(--emerald)} .sf-section-hdr.hdr-results h2::after{background:var(--s400)} .av-border-spin{animation:av-border-color-cycle 3s linear infinite} .av-diamond-flash{position:relative} .av-diamond-flash::after{content:'';position:absolute;top:4px;right:4px;width:8px;height:8px;background:radial-gradient(circle,rgba(34,211,238,.9) 0%,transparent 70%);border-radius:50%;animation:av-diamond-flash 3s ease-in-out infinite;pointer-events:none} .av-fire{position:relative} .av-fire .av-ember{position:absolute;width:3px;height:3px;border-radius:50%;bottom:10px;animation:av-ember-rise 2s ease-out infinite;pointer-events:none} .av-fire .av-ember:nth-child(1){left:20%;background:#f87171;animation-delay:0s} .av-fire .av-ember:nth-child(2){left:40%;background:#fb923c;animation-delay:.4s;width:2px;height:2px} .av-fire .av-ember:nth-child(3){left:60%;background:#fbbf24;animation-delay:.8s} .av-fire .av-ember:nth-child(4){left:75%;background:#f87171;animation-delay:1.2s;width:2px;height:2px} .av-sparkle{position:relative} .av-sparkle .av-spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#fbbf24;animation:av-sparkle-float 2.5s ease-in-out infinite;pointer-events:none} .av-sparkle .av-spark:nth-child(2){animation-delay:.6s;width:2px;height:2px;background:#fde68a} .av-sparkle .av-spark:nth-child(3){animation-delay:1.2s;background:#f59e0b} /* ===== LIVE HERO SCORE V1 ===== */ @keyframes lh-outer-pulse{0%,100%{opacity:.3;box-shadow:0 0 20px rgba(16,185,129,.06)}50%{opacity:.6;box-shadow:0 0 45px rgba(16,185,129,.14)}} @keyframes lh-border-pulse{0%,100%{border-color:rgba(16,185,129,.2)}50%{border-color:rgba(16,185,129,.45)}} @keyframes lh-fp-glow{0%,100%{color:var(--s700);text-shadow:0 0 20px rgba(16,185,129,.15)}50%{color:var(--s900);text-shadow:0 0 10px rgba(16,185,129,.2),0 0 30px rgba(16,185,129,.10)}} .lh-outer{border-radius:16px;border:1px solid rgba(16,185,129,.15);padding:3px;animation:lh-outer-pulse 3s ease-in-out infinite} .lh-inner{background:var(--surface2);border:1px solid rgba(16,185,129,.2);border-radius:13px;padding:28px 32px;text-align:center;position:relative;overflow:hidden;animation:lh-border-pulse 3s ease-in-out infinite} .lh-inner::before{content:'';position:absolute;top:-40px;right:-40px;width:140px;height:140px;background:radial-gradient(circle,rgba(16,185,129,.1),transparent 70%);pointer-events:none} .lh-logo-wm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;opacity:.08;pointer-events:none;z-index:0} .lh-inner .live-hero-fp{animation:lh-fp-glow 3s ease-in-out infinite} .lh-static{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:28px 32px;text-align:center} /* ═══ PickOne Calendar Strip ═══ */ .po-phase-bar{display:flex;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:4px;overflow:hidden;margin-bottom:4px} .po-phase{flex:1;text-align:center;padding:8px 4px;border-radius:8px;font-size:10px;color:var(--s400);position:relative;cursor:default;transition:all .3s} .po-phase.po-phase-active{background:rgba(245,158,11,.08);color:var(--gold)} .po-phase.po-phase-active .po-phase-mult{color:var(--gold)} .po-phase.po-phase-done .po-phase-name,.po-phase.po-phase-done .po-phase-mult{color:var(--emerald)} .po-phase-name{font-weight:600;font-size:9px;margin-bottom:2px} .po-phase-mult{font-size:14px;font-weight:900;color:var(--s800)} .po-phase-fill{position:absolute;bottom:0;left:0;height:2px;border-radius:2px;transition:width .5s} .po-calendar{display:flex;gap:10px;overflow-x:auto;padding:16px 0 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none} .po-calendar::-webkit-scrollbar{display:none} .po-day{scroll-snap-align:start;min-width:88px;background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:12px 8px 10px;text-align:center;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;flex-shrink:0} .po-day::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(237,31,58,.05),transparent,rgba(237,31,58,.05),transparent);animation:poShimmerSpin 8s linear infinite;opacity:0;transition:opacity .3s;pointer-events:none} .po-day:hover{border-color:rgba(237,31,58,.25);transform:translateY(-2px);box-shadow:var(--shadow-hover)} .po-day:hover::before{opacity:1} .po-day.po-active{background:linear-gradient(145deg,rgba(237,31,58,.15) 0%,rgba(237,31,58,.03) 100%);border-color:rgba(237,31,58,.4);box-shadow:0 0 20px rgba(237,31,58,.15),0 0 40px rgba(237,31,58,.05),inset 0 1px 0 rgba(255,255,255,.1);transform:translateY(-2px)} .po-day.po-active::before{opacity:1} .po-day.po-active::after{content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:14px;border:1px solid rgba(237,31,58,.5);animation:poDayPulse 2.5s ease-in-out infinite;pointer-events:none} @keyframes poShimmerSpin{to{transform:rotate(360deg)}} @keyframes poGoldShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} @keyframes poBorderGlow{0%,100%{border-color:rgba(245,158,11,.15)}50%{border-color:rgba(245,158,11,.3)}} @keyframes poSubtleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes poDayPulse{0%,100%{opacity:.3}50%{opacity:.8}} .po-day.po-past{opacity:.4} .po-day.po-past:hover{opacity:.6;transform:none} .po-day-date{font-size:11px;font-weight:600;color:rgba(107,113,148,1);letter-spacing:.5px;position:relative} .po-day.po-active .po-day-date{color:#d4af37} .po-day-today{display:inline-block;background:linear-gradient(135deg,#d4af37,#f5c842);color:#000;font-size:8px;font-weight:800;padding:2px 8px;border-radius:4px;letter-spacing:.8px;position:relative;box-shadow:0 2px 8px rgba(237,31,58,.3)} .po-day-games{font-size:22px;font-weight:700;color:#fff;margin:6px 0 2px;line-height:1;position:relative} .po-day.po-active .po-day-games{text-shadow:0 0 20px rgba(237,31,58,.5)} .po-day-games-label{font-size:9px;color:rgba(107,113,148,1);text-transform:uppercase;letter-spacing:1px;position:relative} .po-day.po-active .po-day-games-label{color:rgba(196,169,77,1)} .po-day-score{font-size:16px;font-weight:800;color:var(--s500);margin-bottom:2px;position:relative} .po-day-player{font-size:9px;color:var(--s500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px;margin:0 auto;position:relative} .po-day-meta{font-size:8px;color:var(--s400);margin-top:2px;position:relative} .po-day-mult{font-size:10px;font-weight:600;color:#d4af37;margin-top:6px;position:relative} .po-day.po-active .po-day-mult{color:#d4af37} .po-day-headshot{width:42px;height:42px;border-radius:50%;object-fit:cover;margin:4px auto 2px;display:block;border:2px solid rgba(237,31,58,.5);box-shadow:0 0 12px rgba(237,31,58,.2);position:relative} .po-day-headshot-scored{border-color:rgba(16,185,129,.5);box-shadow:0 0 12px rgba(16,185,129,.2)} .po-day-picked-name{font-size:11px;font-weight:700;color:#fff;margin-top:4px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px;margin-left:auto;margin-right:auto;position:relative} .po-day-picked-status{font-size:8px;color:#d4af37;margin-top:1px;position:relative} .po-day-remove{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:rgba(15,23,42,.15);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s;z-index:2;font-size:10px;color:var(--s500);line-height:1} .po-day:hover .po-day-remove{opacity:1} .po-day-remove:hover{background:rgba(239,68,68,.3);border-color:rgba(239,68,68,.5);color:#fff} /* Collapsed-past pill (desktop default): collapses history beyond the 2 most recent days */ .po-day-pill{scroll-snap-align:start;min-width:60px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--surface2);border:1px dashed var(--border2);border-radius:14px;padding:12px 6px;color:var(--s500);font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;transition:all .25s;text-align:center} .po-day-pill:hover{border-color:rgba(237,31,58,.35);color:var(--s700);transform:translateY(-2px)} .po-day-pill-arrow{font-size:18px;line-height:1;color:var(--s700)} .po-day-pill-count{font-size:18px;font-weight:800;color:var(--s900);line-height:1} /* Desktop ≥769px: hide past cards beyond rank 1 (yesterday + day-before) unless expanded */ @media (min-width:769px){.po-calendar:not(.expanded) .po-day.po-past[data-past-rank]:not([data-past-rank="0"]):not([data-past-rank="1"]){display:none}} /* Mobile ≤768px: hide pill, compact every past card so today + upcoming dominate */ @media (max-width:768px){ .po-day-pill{display:none} .po-day.po-past{min-width:54px;padding:10px 4px 8px;opacity:.55} .po-day.po-past .po-day-headshot,.po-day.po-past .po-day-headshot-scored{width:24px;height:24px;border-width:1.5px;margin:6px auto 4px;box-shadow:none} .po-day.po-past .po-day-games{font-size:14px;margin:0} .po-day.po-past .po-day-player,.po-day.po-past .po-day-picked-name,.po-day.po-past .po-day-picked-status,.po-day.po-past .po-day-mult,.po-day.po-past .po-day-games-label{display:none} .po-day.po-past .po-day-dot{margin-top:6px;width:5px;height:5px} } .sf-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;animation:sfConfFadeIn .2s ease} @keyframes sfConfFadeIn{from{opacity:0}to{opacity:1}} .sf-confirm-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;max-width:320px;width:90%;text-align:center;box-shadow:var(--shadow-modal);animation:sfConfSlideUp .25s ease} @keyframes sfConfSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} .sf-confirm-box h3{font-size:15px;font-weight:700;color:var(--s900);margin-bottom:6px} .sf-confirm-box p{font-size:13px;color:var(--s500);margin-bottom:18px;line-height:1.5} .sf-confirm-btns{display:flex;gap:10px;justify-content:center} .sf-confirm-btns button{padding:8px 20px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s} .sf-confirm-cancel{background:var(--surface2);border:1px solid var(--border);color:var(--s700)} .sf-confirm-cancel:hover{border-color:var(--s400)} .sf-confirm-danger{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:#ef4444} .sf-confirm-danger:hover{background:rgba(239,68,68,.25)} .po-day-dot{width:4px;height:4px;border-radius:50%;margin:6px auto 0;position:relative} .po-dot-picked{background:var(--emerald);box-shadow:0 0 6px rgba(52,211,153,.4)} .po-dot-pending{background:var(--cta-primary);box-shadow:0 0 6px rgba(237,31,58,.6)} .po-dot-empty{background:rgba(58,63,92,1)} .po-dot-missed{background:var(--red);opacity:.5} .po-day-playoff{position:absolute;top:0;left:0;right:0;font-size:7px;text-transform:uppercase;letter-spacing:1.5px;padding:2px 0;background:linear-gradient(90deg,rgba(237,31,58,.3),rgba(237,31,58,.1));color:var(--cta-primary);font-weight:700;pointer-events:none} /* Epic tournament hero */ @property --po-hero-angle{syntax:'';initial-value:0deg;inherits:false} .po-epic-hero{position:relative;border-radius:20px;padding:2px;margin-bottom:20px;background:conic-gradient(from var(--po-hero-angle,0deg),#d4af37,var(--surface),#10b981,var(--surface),#d4af37);animation:poEpicSpin 6s linear infinite} @keyframes poEpicSpin{to{--po-hero-angle:360deg}} .po-epic-hero-inner{background:linear-gradient(160deg,var(--surface) 0%,var(--surface2) 50%,var(--surface) 100%);border-radius:18px;padding:28px 26px;position:relative;overflow:hidden} .po-epic-glow{position:absolute;top:-50%;right:-20%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(237,31,58,.08),transparent 60%);animation:poEpicGlow 4s ease-in-out infinite;pointer-events:none} @keyframes poEpicGlow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}} .po-epic-particle{position:absolute;border-radius:50%;pointer-events:none;opacity:0;animation:poEpicFloat linear infinite} @keyframes poEpicFloat{0%{opacity:0;transform:translateY(0) scale(0)}10%{opacity:1;transform:scale(1)}90%{opacity:.6}100%{opacity:0;transform:translateY(-200px) scale(.3)}} .po-epic-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;font-size:10px;font-weight:700;background:rgba(237,31,58,.12);color:var(--cta-primary);border:1px solid rgba(237,31,58,.25);margin-bottom:12px;position:relative;overflow:hidden;animation:poEpicBadge 3s ease-in-out infinite} .po-epic-badge::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:poEpicShine 3s ease-in-out infinite} @keyframes poEpicShine{0%,70%{left:-100%}100%{left:200%}} @keyframes poEpicBadge{0%,100%{border-color:rgba(237,31,58,.25)}50%{border-color:rgba(237,31,58,.5)}} .po-epic-tagline{font-size:24px;font-weight:900;margin-bottom:4px;position:relative;background:linear-gradient(90deg,#d4af37,#f5c842,#d4af37);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:poGoldShift 4s ease-in-out infinite} @keyframes poGoldShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .po-epic-score{font-size:40px;font-weight:900;line-height:1;background:linear-gradient(180deg,#d4af37,#b8962c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} /* Epic payout bar */ .po-epic-payout{border-radius:16px;padding:2px;margin-bottom:20px;background:linear-gradient(135deg,rgba(237,31,58,.3),rgba(16,185,129,.2),rgba(237,31,58,.3));background-size:200% 200%;animation:poPayGrad 5s ease-in-out infinite} @keyframes poPayGrad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .po-epic-payout-inner{background:var(--surface);border-radius:14px;padding:20px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap} .po-epic-amount{font-size:28px;font-weight:900;line-height:1;background:linear-gradient(180deg,#d4af37,#b8962c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .po-epic-medal{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;position:relative} .po-epic-medal::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:1px solid;animation:poMedalPulse 2s ease-in-out infinite;pointer-events:none} @keyframes poMedalPulse{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.3);opacity:0}} .po-medal-1{background:linear-gradient(135deg,#d4af37,#f5c842);color:#000;box-shadow:0 0 16px rgba(237,31,58,.3)} .po-medal-1::after{border-color:rgba(237,31,58,.4)} .po-medal-2{background:linear-gradient(135deg,#94a3b8,#cbd5e1);color:#1e293b;box-shadow:0 0 12px rgba(148,163,184,.2)} .po-medal-2::after{border-color:rgba(148,163,184,.3)} .po-medal-3{background:linear-gradient(135deg,#cd7f32,#daa06d);color:#fff;box-shadow:0 0 12px rgba(205,127,50,.2)} .po-medal-3::after{border-color:rgba(205,127,50,.3)} /* Epic champs card */ .po-epic-champs{border-radius:16px;overflow:hidden;border:1px solid rgba(237,31,58,.12);margin-bottom:20px;background:linear-gradient(135deg,var(--surface),var(--surface2))} .po-epic-champs-header{background:linear-gradient(135deg,rgba(237,31,58,.12),rgba(237,31,58,.04));padding:10px 20px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(237,31,58,.08);position:relative;overflow:hidden} .po-epic-champs-header::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(237,31,58,.06),transparent);animation:poChampSweep 6s ease-in-out infinite} @keyframes poChampSweep{0%,60%{left:-100%}100%{left:200%}} .po-epic-fire{animation:poFire 1s ease-in-out infinite alternate} @keyframes poFire{0%{transform:scale(1) rotate(-3deg)}100%{transform:scale(1.1) rotate(3deg)}} .po-epic-champs-img{width:140px;height:170px;border-radius:12px;object-fit:cover;border:2px solid rgba(237,31,58,.2);box-shadow:0 8px 24px rgba(15,23,42,.12),0 0 16px rgba(237,31,58,.06);flex-shrink:0;transition:transform .3s,box-shadow .3s} .po-epic-champs-img:hover{transform:scale(1.03) rotate(1deg);box-shadow:0 12px 32px rgba(15,23,42,.18),0 0 22px rgba(237,31,58,.10)} .po-epic-champs-question em{font-style:normal;background:linear-gradient(90deg,#d4af37,#f5c842);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .po-epic-place{text-align:center;padding:10px 14px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);transition:all .3s} .po-epic-place:hover{background:rgba(237,31,58,.05);border-color:rgba(237,31,58,.15);transform:translateY(-2px)} /* MegaCup lobby quick access card */ .mc-lobby{position:relative;border-radius:16px;padding:2px;margin-bottom:12px;margin-left:-1px;margin-right:-1px;background:conic-gradient(from var(--mc-angle,0deg),#d4af37,var(--surface),#10b981,var(--surface),#d4af37);animation:mcLobbySpin 6s linear infinite;cursor:pointer} @property --mc-angle{syntax:'';initial-value:0deg;inherits:false} @keyframes mcLobbySpin{to{--mc-angle:360deg}} .mc-lobby-inner{background:linear-gradient(135deg,var(--surface),var(--surface2));border-radius:14px;padding:16px 18px;position:relative;overflow:hidden;transition:background .2s} .mc-lobby:hover .mc-lobby-inner{background:linear-gradient(135deg,var(--surface2),var(--surface))} .mc-lobby-glow{position:absolute;top:-40px;right:-20px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(237,31,58,.1),transparent 60%);animation:mcLobbyGlow 3s ease-in-out infinite;pointer-events:none} @keyframes mcLobbyGlow{0%,100%{opacity:.5}50%{opacity:1}} .mc-lobby-title{font-size:15px;font-weight:800;background:linear-gradient(90deg,#d4af37,#f5c842,#d4af37);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:mcLobbyGold 4s ease-in-out infinite} @keyframes mcLobbyGold{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .mc-lobby-trophy{width:42px;height:42px;border-radius:12px;background:rgba(237,31,58,.1);border:1px solid rgba(237,31,58,.2);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;animation:mcLobbyBounce 2s ease-in-out infinite} @keyframes mcLobbyBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.08) rotate(3deg)}} .mc-lobby-pool{font-size:18px;font-weight:900;color:#d4af37} .mc-lobby-arrow{font-size:16px;color:rgba(237,31,58,.4);transition:transform .2s;margin-left:auto} .mc-lobby:hover .mc-lobby-arrow{transform:translateX(3px);color:rgba(237,31,58,.7)} .mc-lobby-dot{width:6px;height:6px;border-radius:50%;background:#10b981;animation:mcLobbyDot 1.5s ease-in-out infinite} @keyframes mcLobbyDot{0%,100%{opacity:1}50%{opacity:.3}} @media(max-width:768px){ .po-epic-tagline{font-size:20px} .po-epic-score{font-size:32px} .po-epic-amount{font-size:22px} .po-epic-champs-img{width:100%;height:auto;max-height:220px} } /* Injury overlay on headshots (Option B) */ .po-inj-wrap{position:relative;flex-shrink:0} .po-inj-dot{position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;border:2px solid var(--surface);font-size:7px;font-weight:900;display:flex;align-items:center;justify-content:center;color:#fff;z-index:1} .po-inj-dot-out{background:#ef4444} .po-inj-dot-dtd{background:#f59e0b} .po-inj-dot-prob{background:#10b981} .po-inj-bar{position:absolute;bottom:0;left:0;right:0;font-size:7px;font-weight:800;text-align:center;padding:1px 0;border-radius:0 0 10px 10px;letter-spacing:.5px;z-index:1} .po-inj-bar-out{background:rgba(239,68,68,.85);color:#fff} .po-inj-bar-dtd{background:rgba(245,158,11,.85);color:#fff} /* Player card with gamelog expand */ .po-player-card{border-radius:10px;overflow:hidden;background:var(--surface);border:1px solid var(--border);transition:border-color .2s} .po-player-card:hover{border-color:rgba(237,31,58,.2)} .po-player-card.po-card-open{border-color:rgba(237,31,58,.3);background:linear-gradient(180deg,var(--surface) 0%,rgba(25,29,48,1) 100%)} .po-player-card .po-row{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;border:none;background:transparent} .po-expand-icon{font-size:10px;color:rgba(107,113,148,.4);transition:transform .2s;margin-left:4px;flex-shrink:0} .po-player-card.po-card-open .po-expand-icon{transform:rotate(180deg)} /* Gamelog panel */ .po-gamelog{overflow:hidden;max-height:0;transition:max-height .3s ease,opacity .2s;opacity:0} .po-player-card.po-card-open .po-gamelog{max-height:400px;opacity:1} .po-team-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px} .po-team-col{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;min-width:0} .po-team-col-header{padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);background:var(--surface2)} .po-team-abbr{width:36px;height:36px;border-radius:8px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;color:var(--s900);flex-shrink:0;letter-spacing:.5px} .po-team-meta{flex:1;min-width:0} .po-team-name{font-size:13px;font-weight:800;color:var(--s900)} .po-team-side{font-size:10px;color:var(--s400);text-transform:uppercase;letter-spacing:.5px;margin-top:1px} .po-team-badge{padding:3px 8px;border-radius:6px;font-size:9px;font-weight:700;letter-spacing:.5px} .po-team-badge.home{background:rgba(52,211,153,.1);color:var(--emerald);border:1px solid rgba(52,211,153,.2)} .po-team-badge.away{background:rgba(96,165,250,.1);color:var(--blue);border:1px solid rgba(96,165,250,.2)} .po-team-col .po-players{display:flex;flex-direction:column;gap:4px;padding:6px} /* Tournament switcher bar (top of PickOne page when user has >=2 joined tournaments) */ .po-switch{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px;padding:4px 2px;scrollbar-width:thin} .po-switch::-webkit-scrollbar{height:4px} .po-switch::-webkit-scrollbar-track{background:transparent} .po-switch::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px} .po-tab{flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;min-width:160px;cursor:pointer;position:relative;transition:all .2s;color:var(--s700);text-decoration:none;display:block} .po-tab:hover{border-color:rgba(237,31,58,.3);transform:translateY(-1px)} .po-tab.active{background:linear-gradient(135deg,var(--gold-lt),transparent);border-color:var(--gold);box-shadow:0 0 18px rgba(237,31,58,.12)} .po-tab.pending{border-color:var(--orange);animation:poTabPulse 2.5s ease-in-out infinite} .po-tab.active.pending{border-color:var(--gold);animation:none} .po-tab.missed{border-color:var(--red)} .po-tab-top{display:flex;align-items:center;gap:6px;margin-bottom:3px} .po-tab-kind{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--s400)} .po-tab.active .po-tab-kind{color:var(--gold)} .po-tab-name{font-size:13px;font-weight:800;color:var(--s900);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:240px} .po-tab-status{font-size:10px;margin-top:3px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:240px} .po-tab-status.ok{color:var(--emerald)} .po-tab-status.pending-txt{color:var(--orange)} .po-tab-status.missed-txt{color:var(--red)} .po-tab-status.none{color:var(--s400)} .po-tab-dot{position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;background:var(--orange);border:2px solid var(--bg);box-shadow:0 0 0 2px rgba(251,146,60,.3);animation:poTabDot 2s ease-in-out infinite} .po-tab-dot.red{background:var(--red);box-shadow:0 0 0 2px rgba(248,113,113,.3);animation:none} @keyframes poTabPulse { 0%,100% {box-shadow:0 0 0 0 rgba(251,146,60,.3)} 50% {box-shadow:0 0 0 4px rgba(251,146,60,0)} } @keyframes poTabDot { 0%,100% {transform:scale(1);opacity:1} 50% {transform:scale(1.15);opacity:.7} } /* ═══════════════════════════════════════════════════════════ ADMIN ALERTS — Phase A "Needs Attention" feed (aa-*) ═══════════════════════════════════════════════════════════ */ .aa-wrap{margin-bottom:22px} .aa-head{display:flex;align-items:center;gap:10px;margin-bottom:10px} .aa-title{font-size:12px;font-weight:800;color:var(--s500);text-transform:uppercase;letter-spacing:1.5px;display:inline-flex;align-items:center;gap:8px} .aa-title::before{content:'';display:inline-block;width:16px;height:2px;background:linear-gradient(90deg,var(--red),transparent);border-radius:1px} .aa-pulse{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(248,113,113,.5);animation:aaPulse 1.8s ease-in-out infinite} @keyframes aaPulse{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.5)}50%{box-shadow:0 0 0 6px rgba(248,113,113,0)}} .aa-counts{display:inline-flex;gap:6px;margin-left:auto;font-size:11px} .aa-count{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-weight:800} .aa-count-summary{font-size:10px;font-weight:600;color:var(--s400);margin-right:6px} .aa-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:2px 7px;margin-left:6px;border-radius:999px;background:var(--surface2);color:var(--s700);font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.3px;vertical-align:baseline} .aa-row.critical .aa-count-badge{background:rgba(248,113,113,.18);color:var(--red)} .aa-row.warn .aa-count-badge{background:rgba(251,146,60,.14);color:var(--orange)} .aa-count.critical{background:rgba(248,113,113,.12);color:var(--red);border:1px solid rgba(248,113,113,.3)} .aa-count.warn{background:rgba(251,146,60,.12);color:var(--orange);border:1px solid rgba(251,146,60,.3)} .aa-count.info{background:rgba(96,165,250,.12);color:var(--blue);border:1px solid rgba(96,165,250,.3)} .aa-list{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card)} .aa-row{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;transition:background .15s;position:relative} .aa-row:last-child{border-bottom:none} .aa-row:hover{background:var(--surface2)} .aa-row::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px} .aa-row.critical::before{background:linear-gradient(180deg,var(--red),rgba(248,113,113,.3));box-shadow:0 0 12px rgba(248,113,113,.2)} .aa-row.warn::before{background:linear-gradient(180deg,var(--orange),rgba(251,146,60,.3))} .aa-row.info::before{background:linear-gradient(180deg,var(--blue),rgba(96,165,250,.3))} .aa-sev{padding:3px 8px;border-radius:6px;font-size:9px;font-weight:800;letter-spacing:.5px;flex-shrink:0} .aa-sev.critical{background:rgba(248,113,113,.14);color:var(--red);border:1px solid rgba(248,113,113,.3)} .aa-sev.warn{background:rgba(251,146,60,.12);color:var(--orange);border:1px solid rgba(251,146,60,.3)} .aa-sev.info{background:rgba(96,165,250,.12);color:var(--blue);border:1px solid rgba(96,165,250,.3)} .aa-body{flex:1;min-width:0} .aa-r-title{font-size:13px;font-weight:800;color:var(--s900);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .aa-r-body{font-size:11px;color:var(--s500);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .aa-r-time{font-size:10px;color:var(--s500);flex-shrink:0;font-variant-numeric:tabular-nums;margin-right:6px} .aa-btn{padding:6px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--s700);font-size:11px;font-weight:700;cursor:pointer;flex-shrink:0;font-family:inherit} .aa-btn:hover{border-color:var(--border2, #353a52);color:var(--s900)} .aa-btn.resolve{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.3);color:var(--emerald)} .aa-btn.resolve:hover{background:rgba(52,211,153,.15)} .aa-empty{padding:20px;text-align:center;color:var(--s500);font-size:12px;font-style:italic} .aa-empty strong{color:var(--emerald);font-style:normal} /* ═══════════════════════════════════════════════════════════ ADMIN HOME — premium dashboard styles ═══════════════════════════════════════════════════════════ */ .ah-wrap{max-width:1280px;margin:0 auto} .ah-wrap .num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'} .ah-alert{display:flex;align-items:center;gap:12px;padding:10px 18px;background:linear-gradient(90deg,rgba(248,113,113,.1),rgba(248,113,113,.02));border:1px solid rgba(248,113,113,.25);border-radius:10px;margin-bottom:18px;font-size:12px} .ah-alert-ico{width:26px;height:26px;border-radius:50%;background:rgba(248,113,113,.15);color:var(--red);display:flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0;animation:ahAbPulse 2s ease-in-out infinite} @keyframes ahAbPulse{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.35)}50%{box-shadow:0 0 0 6px rgba(248,113,113,0)}} .ah-alert strong{color:var(--s900)} .ah-alert-cta{margin-left:auto;padding:5px 12px;border-radius:6px;background:var(--red);color:#1a0606;font-size:11px;font-weight:800;cursor:pointer;border:none} .ah-hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap} .ah-crumb{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--s400);margin-bottom:2px;display:flex;align-items:center;gap:6px} .ah-crumb-live{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 0 rgba(52,211,153,.4);animation:ahLiveDot 2s ease-in-out infinite} @keyframes ahLiveDot{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.4)}50%{box-shadow:0 0 0 5px rgba(52,211,153,0)}} .ah-title{color:var(--s900);font-size:28px;font-weight:900;margin:0;letter-spacing:-.5px;background:linear-gradient(135deg,var(--s900),var(--s700));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent} .ah-quicknav{display:flex;gap:4px;margin-bottom:24px;padding:4px;background:rgba(var(--surface-rgb),.96);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-card);overflow-x:auto;scrollbar-width:none;position:sticky;top:72px;z-index:50;backdrop-filter:blur(12px);} @media(max-width:768px){.ah-quicknav{top:56px}} .ah-quicknav::-webkit-scrollbar{display:none} .ah-qn{padding:8px 16px;border-radius:8px;color:var(--s500);font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0;background:transparent;border:none;font-family:inherit} .ah-qn:hover{color:var(--s900)} .ah-qn.active{background:linear-gradient(135deg,rgba(237,31,58,.12),rgba(237,31,58,.04));color:var(--gold);box-shadow:inset 0 0 0 1px rgba(237,31,58,.2)} .ah-qn .badge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:10px;background:var(--red);color:#fff;font-size:9px;font-weight:800} .ah-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:28px} @media(max-width:1100px){.ah-kpi-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.ah-kpi-grid{grid-template-columns:repeat(2,1fr)}} .ah-kpi{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px 14px;cursor:pointer;transition:all .25s;overflow:hidden;box-shadow:var(--shadow-card)} .ah-kpi:hover{border-color:var(--border2, #353a52);transform:translateY(-3px)} .ah-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(26,37,64,.18),transparent)} .ah-kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .ah-kpi-label{font-size:10px;font-weight:800;color:var(--s400);text-transform:uppercase;letter-spacing:1.2px} .ah-kpi-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;font-weight:900} .ah-kpi-icon.dau{background:linear-gradient(135deg,rgba(52,211,153,.15),rgba(52,211,153,.03));color:var(--emerald);box-shadow:inset 0 0 0 1px rgba(52,211,153,.2)} .ah-kpi-icon.sign{background:linear-gradient(135deg,rgba(96,165,250,.15),rgba(96,165,250,.03));color:var(--blue);box-shadow:inset 0 0 0 1px rgba(96,165,250,.2)} .ah-kpi-icon.cnt{background:linear-gradient(135deg,rgba(167,139,250,.15),rgba(167,139,250,.03));color:var(--purple);box-shadow:inset 0 0 0 1px rgba(167,139,250,.2)} .ah-kpi-icon.rev{background:linear-gradient(135deg,rgba(237,31,58,.18),rgba(237,31,58,.04));color:var(--gold);box-shadow:inset 0 0 0 1px rgba(237,31,58,.3)} .ah-kpi-icon.err{background:linear-gradient(135deg,rgba(251,146,60,.15),rgba(251,146,60,.03));color:var(--orange);box-shadow:inset 0 0 0 1px rgba(251,146,60,.2)} .ah-kpi-icon.scr{background:linear-gradient(135deg,rgba(248,113,113,.18),rgba(248,113,113,.04));color:var(--red);box-shadow:inset 0 0 0 1px rgba(248,113,113,.3)} .ah-kpi-value{font-size:26px;font-weight:900;color:var(--s900);letter-spacing:-.5px;line-height:1;margin-bottom:6px} .ah-kpi-value.gold{color:var(--cta-primary)} .ah-kpi-value.red{color:var(--red)} .ah-kpi-delta{font-size:11px;font-weight:800;display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:10px} .ah-kpi-delta.up{background:rgba(52,211,153,.1);color:var(--emerald)} .ah-kpi-delta.dn{background:rgba(248,113,113,.1);color:var(--red)} .ah-kpi-delta.flat{background:var(--surface2);color:var(--s500)} .ah-kpi-sub{font-size:10px;color:var(--s400);margin-left:7px;font-weight:600} .ah-kpi-spark{position:absolute;bottom:0;right:0;left:0;height:38px;opacity:.5;pointer-events:none} .ah-kpi.alert{border-color:rgba(248,113,113,.4);background:linear-gradient(180deg,rgba(248,113,113,.04),var(--surface) 60%)} .ah-sec-hdr{display:flex;align-items:center;justify-content:space-between;margin:6px 0 14px;gap:10px;flex-wrap:wrap} .ah-sec-hdr h2{margin:0;font-size:12px;font-weight:800;color:var(--s500);text-transform:uppercase;letter-spacing:1.5px;display:inline-flex;align-items:center;gap:8px} .ah-sec-hdr h2::before{content:'';display:inline-block;width:16px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:1px} .ah-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 4px 16px rgba(15,23,42,.06);position:relative} .ah-card-hdr{padding:16px 18px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border)} .ah-card-title{font-size:13px;font-weight:800;color:var(--s900);display:flex;align-items:center;gap:8px} .ah-card-title .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(237,31,58,.4)} .ah-card-sub{font-size:11px;color:var(--s500);font-weight:600} .ah-row{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-bottom:22px} .ah-row-eq{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px} @media(max-width:900px){.ah-row,.ah-row-eq{grid-template-columns:1fr}} .ah-rev-hero{position:relative;padding:22px 22px 0;overflow:hidden} .ah-rev-hero::before{content:'';position:absolute;top:-40%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(237,31,58,.1),transparent 60%);pointer-events:none} .ah-rev-num{font-size:42px;font-weight:900;letter-spacing:-1px;line-height:1;color:var(--cta-primary);display:inline-block} .ah-rev-unit{font-size:14px;font-weight:700;color:var(--s400);margin-left:8px} .ah-rev-delta{display:inline-flex;align-items:center;gap:5px;margin-left:12px;padding:4px 10px;border-radius:20px;background:rgba(52,211,153,.1);color:var(--emerald);font-size:11px;font-weight:800;vertical-align:middle} .ah-rev-delta.dn{background:rgba(248,113,113,.1);color:var(--red)} .ah-rev-breakdown{display:flex;gap:0;margin-top:14px;padding:10px 12px;background:var(--surface2);border-radius:10px;border:1px solid var(--border)} .ah-rev-bar{flex:1;padding:6px 10px;border-right:1px solid var(--border)} .ah-rev-bar:last-child{border-right:none} .ah-rb-label{font-size:9px;font-weight:700;color:var(--s400);text-transform:uppercase;letter-spacing:.8px;margin-bottom:3px} .ah-rb-val{font-size:15px;font-weight:800;color:var(--s900);font-variant-numeric:tabular-nums} .ah-rb-pct{font-size:10px;color:var(--s500);margin-left:4px} .ah-chart-wrap{padding:14px 18px;position:relative} .ah-chart-y{position:absolute;left:4px;font-size:10px;font-weight:700;color:var(--s500);line-height:1;pointer-events:none;font-variant-numeric:tabular-nums;letter-spacing:.2px} .ah-chart-x{position:absolute;bottom:4px;font-size:10px;color:var(--s500);pointer-events:none;font-weight:600} .ah-chart-x-left{left:30px} .ah-chart-x-right{right:18px} .ah-chart-peak{position:absolute;transform:translate(-50%,-100%);pointer-events:none;text-align:center} .ah-chart-peak-dot{width:8px;height:8px;border-radius:50%;margin:0 auto 2px;box-shadow:0 0 10px currentColor} .ah-chart-peak-val{background:var(--surface);padding:2px 6px;border-radius:6px;font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;display:inline-block;line-height:1.2} .ah-chart-last{position:absolute;transform:translate(-50%,-100%);pointer-events:none;text-align:center} .ah-chart-last-val{background:var(--surface);padding:2px 6px;border-radius:6px;font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;display:inline-block;line-height:1.2;border:1px solid var(--border)} .ah-chart{width:100%;height:180px;display:block} .ah-chart-legend{display:flex;gap:14px;flex-wrap:wrap;padding:0 18px 14px;font-size:10px;color:var(--s400);font-weight:600} .ah-chart-legend .dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle} .ah-cohort-inner{padding:8px 12px 14px;overflow-x:auto} .ah-cohort-tbl{width:100%;border-collapse:separate;border-spacing:3px;font-size:11px} .ah-cohort-tbl th{padding:6px 4px;text-align:center;color:var(--s400);font-weight:700;font-size:9px;text-transform:uppercase;letter-spacing:.8px} .ah-cohort-tbl td{padding:0;text-align:center;font-variant-numeric:tabular-nums} .ah-cohort-tbl td.w{text-align:left;padding:8px 10px;font-weight:700;color:var(--s800);font-size:11px} .ah-cohort-tbl td.size{color:var(--s500);font-size:10px;font-weight:700} .ah-c-cell{display:block;padding:6px 0;border-radius:6px;font-weight:800;font-size:11px} .ah-c-100{background:linear-gradient(135deg,#0d4a35,#116a4b);color:#6ef5b3} .ah-c-80 {background:linear-gradient(135deg,#0c3f2e,#0f5a40);color:#6ef5b3} .ah-c-60 {background:linear-gradient(135deg,#0a3324,#0c4d37);color:#4cd09a} .ah-c-40 {background:linear-gradient(135deg,#40301a,#5a3f22);color:#ffae5a} .ah-c-20 {background:linear-gradient(135deg,#3e1a1a,#552424);color:#ff7a7a} .ah-c-na {color:var(--s500);font-size:10px;font-weight:600} .ah-spend{padding:6px 12px} .ah-sp-row{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:10px;transition:background .15s} .ah-sp-row:hover{background:var(--surface2)} .ah-sp-rank{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;flex-shrink:0;font-variant-numeric:tabular-nums} .ah-sp-rank.r1{background:var(--cta-primary);color:#fff;box-shadow:0 4px 12px rgba(237,31,58,.25)} .ah-sp-rank.r2{background:linear-gradient(135deg,#cbd5e1,#94a3b8);color:#1a1a1a} .ah-sp-rank.r3{background:linear-gradient(135deg,#cd7f32,#b06820);color:#200f03} .ah-sp-rank.other{background:var(--surface2);color:var(--s500);border:1px solid var(--border)} .ah-sp-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--surface2),var(--surface));display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--gold);font-size:12px;flex-shrink:0;border:1px solid var(--border)} .ah-sp-name{flex:1;min-width:0;font-weight:700;color:var(--s800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ah-sp-badge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:8px;font-size:9px;font-weight:800;vertical-align:1px} .ah-sp-badge.whale{background:rgba(52,211,153,.1);color:var(--emerald);border:1px solid rgba(52,211,153,.2)} .ah-sp-badge.hot{background:rgba(251,146,60,.1);color:var(--orange);border:1px solid rgba(251,146,60,.2)} .ah-sp-amt{font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;font-size:13px} .ah-scraper-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;padding:16px} .ah-st{background:linear-gradient(180deg,var(--surface2),rgba(13,15,22,.6));border:1px solid var(--border);border-radius:12px;padding:12px 14px;position:relative;overflow:hidden} .ah-st::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;border-radius:3px 0 0 3px} .ah-st.ok::before{background:linear-gradient(180deg,var(--emerald),rgba(52,211,153,.3))} .ah-st.stale::before,.ah-st.error::before{background:linear-gradient(180deg,var(--red),rgba(248,113,113,.3));box-shadow:0 0 12px rgba(248,113,113,.25)} .ah-st.stale,.ah-st.error{background:linear-gradient(180deg,rgba(248,113,113,.04),rgba(13,15,22,.6))} .ah-st-hdr{display:flex;align-items:center;gap:6px;margin-bottom:4px} .ah-st-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} .ah-st.ok .ah-st-dot{background:var(--emerald);box-shadow:0 0 8px rgba(52,211,153,.4);animation:ahStDot 2s ease-in-out infinite} .ah-st.stale .ah-st-dot,.ah-st.error .ah-st-dot{background:var(--red);box-shadow:0 0 10px rgba(248,113,113,.4)} @keyframes ahStDot{0%,100%{opacity:1}50%{opacity:.5}} .ah-st-name{font-size:11px;font-weight:800;color:var(--s900)} .ah-st-meta{font-size:10px;color:var(--s400)} .ah-st-time{font-size:13px;font-weight:800;color:var(--s800);margin-top:8px;font-variant-numeric:tabular-nums} .ah-st.stale .ah-st-time,.ah-st.error .ah-st-time{color:var(--red)} .ah-st-err{font-size:10px;color:var(--red);margin-top:6px;line-height:1.35;max-height:2.7em;overflow:hidden} .ah-err-toolbar{padding:12px 16px;display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--border);flex-wrap:wrap;background:var(--surface2)} .ah-err-input{flex:1;min-width:140px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--s800);font-size:12px;font-family:inherit} .ah-err-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(237,31,58,.08)} .ah-err-chip{padding:6px 10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--s700);font-size:11px;font-weight:700;cursor:pointer} .ah-err-chip.active{background:rgba(237,31,58,.08);border-color:var(--gold);color:var(--gold)} .ah-err-row{padding:11px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;font-size:12px;cursor:pointer;transition:background .15s;align-items:center} .ah-err-row:hover{background:var(--surface2)} .ah-err-row:last-child{border-bottom:none} .ah-err-time{color:var(--s400);min-width:44px;font-variant-numeric:tabular-nums;flex-shrink:0;font-weight:700;font-size:11px} .ah-err-type{padding:2px 8px;border-radius:5px;font-size:9px;font-weight:800;letter-spacing:.5px;flex-shrink:0} .ah-err-type.err{background:rgba(248,113,113,.12);color:var(--red);box-shadow:inset 0 0 0 1px rgba(248,113,113,.2)} .ah-err-type.warn{background:rgba(251,146,60,.12);color:var(--orange);box-shadow:inset 0 0 0 1px rgba(251,146,60,.2)} .ah-err-path{color:var(--s500);min-width:110px;font-family:monospace;font-size:10px;flex-shrink:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px} .ah-err-msg{color:var(--s700);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ah-err-count{color:var(--s500);font-size:10px;flex-shrink:0;padding:2px 6px;background:var(--surface2);border-radius:4px;font-weight:700} .ah-act-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);font-size:11px;align-items:flex-start} .ah-act-item:last-child{border-bottom:none} .ah-act-ico{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px;font-weight:800} .ah-act-ico.signup{background:rgba(52,211,153,.1);color:var(--emerald)} .ah-act-ico.spend{background:rgba(237,31,58,.1);color:var(--gold)} .ah-act-ico.win{background:rgba(167,139,250,.1);color:var(--purple)} .ah-act-body{flex:1;min-width:0;color:var(--s700);line-height:1.5} .ah-act-body strong{color:var(--s900)} .ah-act-time{color:var(--s500);font-size:10px;flex-shrink:0} /* ═══════════════════════════════════════════════════════════ MONITORING — mission control (reuses ah-* system, adds mon-*) ═══════════════════════════════════════════════════════════ */ .mon-status{display:flex;align-items:center;gap:14px;padding:14px 22px;border-radius:14px;margin-bottom:22px;box-shadow:var(--shadow-card);position:relative;overflow:hidden} .mon-status.ok{background:linear-gradient(90deg,rgba(52,211,153,.08),transparent 80%);border:1px solid rgba(52,211,153,.25)} .mon-status.warn{background:linear-gradient(90deg,rgba(251,146,60,.12),transparent 80%);border:1px solid rgba(251,146,60,.3)} .mon-status.alert{background:linear-gradient(90deg,rgba(248,113,113,.14),transparent 80%);border:1px solid rgba(248,113,113,.35)} .mon-status .pulse{width:12px;height:12px;border-radius:50%;flex-shrink:0;animation:monPulse 1.8s ease-in-out infinite} .mon-status.ok .pulse{background:var(--emerald)} .mon-status.warn .pulse{background:var(--orange)} .mon-status.alert .pulse{background:var(--red)} @keyframes monPulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}50%{box-shadow:0 0 0 8px rgba(52,211,153,0)}} .mon-status-txt{flex:1;min-width:0} .mon-status-main{font-size:14px;font-weight:800;color:var(--s900);margin-bottom:2px} .mon-status-sub{font-size:11px;color:var(--s400)} .mon-status-actions{display:flex;gap:8px;flex-shrink:0} .mon-btn{padding:7px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--s700);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit} .mon-btn:hover{border-color:var(--border2, #353a52);color:var(--s900)} /* KPI system mini (uses ah-kpi structure) */ .mon-sys-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:24px} .mon-sys{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden} .mon-sys::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(26,37,64,.18),transparent)} .mon-sys-label{font-size:10px;font-weight:800;color:var(--s400);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:6px} .mon-sys-val{font-size:20px;font-weight:900;color:var(--s900);font-variant-numeric:tabular-nums;letter-spacing:-.3px;line-height:1} .mon-sys-val .unit{font-size:11px;font-weight:700;color:var(--s400);margin-left:3px} .mon-sys-val.gold{color:var(--gold)} .mon-sys-val.emerald{color:var(--emerald)} .mon-sys-val.red{color:var(--red)} .mon-sys-sub{font-size:10px;color:var(--s500);margin-top:4px;font-weight:600} /* Scraper tiles (monitoring specific — simpler than Admin Home, no heatmap yet) */ .mon-scr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;padding:14px} .mon-scr{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;position:relative;overflow:hidden} .mon-scr::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;border-radius:3px 0 0 3px} .mon-scr.ok::before{background:linear-gradient(180deg,var(--emerald),rgba(52,211,153,.3))} .mon-scr.stale::before,.mon-scr.error::before{background:linear-gradient(180deg,var(--red),rgba(248,113,113,.3));box-shadow:0 0 12px rgba(248,113,113,.25)} .mon-scr.stale,.mon-scr.error{background:linear-gradient(180deg,rgba(248,113,113,.04),rgba(13,15,22,.6))} .mon-scr-hdr{display:flex;align-items:center;gap:6px;margin-bottom:4px} .mon-scr-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} .mon-scr.ok .mon-scr-dot{background:var(--emerald);box-shadow:0 0 8px rgba(52,211,153,.4);animation:monScrD 2s ease-in-out infinite} .mon-scr.stale .mon-scr-dot,.mon-scr.error .mon-scr-dot{background:var(--red);box-shadow:0 0 10px rgba(248,113,113,.4)} @keyframes monScrD{0%,100%{opacity:1}50%{opacity:.5}} .mon-scr-name{font-size:11px;font-weight:800;color:var(--s900)} .mon-scr-meta{font-size:10px;color:var(--s400)} .mon-scr-time{font-size:12px;font-weight:800;color:var(--s800);margin-top:6px;font-variant-numeric:tabular-nums} .mon-scr.stale .mon-scr-time,.mon-scr.error .mon-scr-time{color:var(--red)} .mon-scr-err{font-size:10px;color:var(--red);margin-top:6px;line-height:1.35;max-height:2.7em;overflow:hidden} /* Error log toolbar + rows (reuses ah-err styling idea) */ .mon-err-toolbar{padding:12px 16px;display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--border);flex-wrap:wrap;background:var(--surface2)} .mon-err-input{flex:1;min-width:140px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--s800);font-size:12px;font-family:inherit} .mon-err-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(237,31,58,.08)} .mon-err-chip{padding:6px 10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--s700);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit} .mon-err-chip.active{background:rgba(237,31,58,.08);border-color:var(--gold);color:var(--gold)} .mon-err-row{padding:11px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;font-size:12px;align-items:center} .mon-err-row:hover{background:var(--surface2)} .mon-err-row:last-child{border-bottom:none} .mon-err-time{color:var(--s400);min-width:44px;font-variant-numeric:tabular-nums;flex-shrink:0;font-weight:700;font-size:11px} .mon-err-type{padding:2px 8px;border-radius:5px;font-size:9px;font-weight:800;letter-spacing:.5px;flex-shrink:0} .mon-err-type.err{background:rgba(248,113,113,.12);color:var(--red);box-shadow:inset 0 0 0 1px rgba(248,113,113,.2)} .mon-err-type.warn{background:rgba(251,146,60,.12);color:var(--orange);box-shadow:inset 0 0 0 1px rgba(251,146,60,.2)} .mon-err-path{color:var(--s500);min-width:120px;font-family:monospace;font-size:10px;flex-shrink:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px} .mon-err-msg{color:var(--s700);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mon-err-count{color:var(--s500);font-size:10px;flex-shrink:0;padding:2px 6px;background:var(--surface2);border-radius:4px;font-weight:700} /* Accordion for collapsed geo/devices/signups/db-tables */ .mon-acc{border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:14px;overflow:hidden} .mon-acc-hdr{padding:13px 18px;display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none} .mon-acc-hdr:hover{background:var(--surface2)} .mon-acc-title{font-size:13px;font-weight:800;color:var(--s900);display:inline-flex;align-items:center;gap:8px} .mon-acc-title .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0} .mon-acc-hint{font-size:11px;color:var(--s500);margin-left:auto;margin-right:10px} .mon-acc-arrow{color:var(--s500);transition:transform .2s;font-size:14px} .mon-acc.open .mon-acc-arrow{transform:rotate(90deg)} .mon-acc-body{display:none;padding:14px 18px;border-top:1px solid var(--border)} .mon-acc.open .mon-acc-body{display:block} /* Geo + device inline styles when expanded */ .mon-geo-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:4px 0} .mon-geo-country{min-width:110px;font-weight:700;color:var(--s800)} .mon-geo-bar{flex:1;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden} .mon-geo-fill{height:100%;background:linear-gradient(90deg,var(--gold),rgba(237,31,58,.5))} .mon-geo-count{min-width:50px;text-align:right;color:var(--s500);font-variant-numeric:tabular-nums;font-size:11px} .mon-geo-toggle{display:inline-flex;gap:2px;padding:3px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;margin-bottom:10px} .mon-geo-tbtn{padding:4px 12px;font-size:11px;font-weight:700;color:var(--s500);cursor:pointer;border-radius:5px;border:none;background:transparent;font-family:inherit} .mon-geo-tbtn.active{background:rgba(237,31,58,.1);color:var(--gold)} /* Small signup row */ .mon-sgn{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12px;border-bottom:1px solid var(--border)} .mon-sgn:last-child{border-bottom:none} .mon-sgn-av{width:26px;height:26px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:800;font-size:11px;flex-shrink:0} .mon-sgn-name{font-weight:700;color:var(--s800)} .mon-sgn-email{color:var(--s500);font-size:11px} .mon-sgn-time{margin-left:auto;color:var(--s500);font-size:10px;flex-shrink:0} /* ═══════════════════════════════════════════════════════════ ADMIN USERS — premium operator console ═══════════════════════════════════════════════════════════ */ .adu-seg-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px} .adu-seg{flex:1;min-width:130px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;font-family:inherit;text-align:left} .adu-seg::before{content:'';position:absolute;top:0;left:0;right:0;height:2px} .adu-seg:hover{border-color:var(--border2, #353a52);transform:translateY(-2px)} .adu-seg.active{border-color:var(--gold);background:linear-gradient(135deg,rgba(230,57,70,.06),transparent 70%);box-shadow:inset 0 0 0 1px rgba(230,57,70,.15), var(--shadow-hover)} .adu-seg.active::before{background:linear-gradient(90deg,#ed1f3a,var(--gold),#ed1f3a)} .adu-seg-label{font-size:9px;font-weight:800;color:var(--s400);text-transform:uppercase;letter-spacing:1.4px;margin-bottom:4px;display:flex;align-items:center;gap:6px} .adu-seg.active .adu-seg-label{color:var(--gold)} .adu-seg-val{font-size:22px;font-weight:900;color:var(--s900);letter-spacing:-.5px;line-height:1;font-variant-numeric:tabular-nums} .adu-seg-sub{font-size:10px;color:var(--s500);margin-top:4px} .adu-seg.active .adu-seg-val{color:var(--cta-primary)} .adu-seg-ico{width:6px;height:6px;border-radius:50%;flex-shrink:0} .adu-seg-ico.all{background:var(--s400)} .adu-seg-ico.active{background:var(--emerald);box-shadow:0 0 8px rgba(52,211,153,.4)} .adu-seg-ico.whale{background:var(--gold)} .adu-seg-ico.atrisk{background:var(--orange)} .adu-seg-ico.new{background:var(--blue)} .adu-seg-ico.banned{background:var(--red)} .adu-seg-ico.admin{background:var(--purple)} .adu-tools{display:flex;gap:10px;align-items:center;margin-bottom:14px;padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-wrap:wrap} .adu-search-wrap{flex:1;min-width:240px;position:relative} .adu-search{width:100%;padding:10px 12px 10px 36px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--s800);font-size:13px;font-family:inherit} .adu-search:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(237,31,58,.08)} .adu-search-ico{position:absolute;top:50%;left:12px;transform:translateY(-50%);color:var(--s500);font-size:14px} .adu-chip{padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--s700);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap} .adu-chip.active{background:rgba(237,31,58,.08);border-color:var(--gold);color:var(--gold)} .adu-bulk{display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(135deg,rgba(237,31,58,.12),rgba(237,31,58,.04));border:1px solid rgba(237,31,58,.3);border-radius:12px;margin-bottom:14px;box-shadow:0 0 20px rgba(237,31,58,.1);flex-wrap:wrap} .adu-bulk-count{font-size:12px;font-weight:800;color:var(--gold);flex-shrink:0} .adu-bulk-actions{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap} .adu-bulk-btn{padding:6px 12px;background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--s700);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap} .adu-bulk-btn:hover{border-color:var(--gold);color:var(--s900)} .adu-bulk-btn.danger{color:var(--red);border-color:rgba(248,113,113,.3)} .adu-layout{display:grid;grid-template-columns:1fr 380px;gap:14px} .adu-layout.no-drawer{grid-template-columns:1fr} @media(max-width:1200px){.adu-layout{grid-template-columns:1fr}} .adu-tbl-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card)} .adu-scroll{max-height:70vh;overflow-y:auto;overflow-x:auto} .adu-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;min-width:820px} .adu-tbl thead th{padding:10px 12px;text-align:left;font-size:10px;font-weight:800;color:var(--s400);text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border);background:var(--surface2);position:sticky;top:0;z-index:10;user-select:none} .adu-tbl thead th.right{text-align:right} .adu-tbl thead th.sort{cursor:pointer} .adu-tbl thead th.sort:hover{color:var(--s700)} .adu-tbl thead th.sort.active{color:var(--gold)} .adu-tbl thead th.sort.active::after{content:" \25BE";font-size:10px} .adu-tbl thead th.sort.active.asc::after{content:" \25B4"} .adu-tbl tbody td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle} .adu-tbl tbody tr{cursor:pointer;transition:background .15s} .adu-tbl tbody tr:hover td{background:var(--surface2)} .adu-tbl tbody tr.adu-sel td{background:rgba(237,31,58,.05)} .adu-tbl tbody tr.adu-sel td:first-child{box-shadow:inset 2px 0 var(--gold)} .adu-tbl tbody tr.banned{opacity:.55} .adu-chk{width:16px;height:16px;border-radius:4px;border:2px solid var(--border);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:var(--surface2);vertical-align:middle;flex-shrink:0} .adu-chk.on{background:var(--gold);border-color:var(--gold);color:#1a1200;font-weight:900;font-size:10px} .adu-u-cell{display:flex;align-items:center;gap:10px} .adu-u-av{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--surface2),var(--surface));display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--gold);font-size:12px;flex-shrink:0;border:1px solid var(--border);position:relative;overflow:hidden} .adu-u-av.cosmetic-gold{background:radial-gradient(circle,rgba(237,31,58,.3),rgba(237,31,58,.1));border:2px solid var(--gold);color:var(--gold)} .adu-u-av.cosmetic-emerald{background:radial-gradient(circle,rgba(52,211,153,.3),rgba(52,211,153,.1));border:2px solid var(--emerald);color:var(--emerald)} .adu-u-av.cosmetic-purple{background:radial-gradient(circle,rgba(167,139,250,.3),rgba(167,139,250,.1));border:2px solid var(--purple);color:var(--purple)} .adu-u-av.cosmetic-red{background:radial-gradient(circle,rgba(248,113,113,.3),rgba(248,113,113,.1));border:2px solid var(--red);color:var(--red)} .adu-u-info{min-width:0;flex:1;overflow:hidden} .adu-u-name{font-size:13px;font-weight:800;color:var(--s900);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .adu-u-name.banned-strike{text-decoration:line-through;color:var(--s500)} .adu-u-email{font-size:11px;color:var(--s500);margin-top:1px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:220px} .adu-u-online{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 8px rgba(52,211,153,.5);animation:aduPulseDot 2s ease-in-out infinite;flex-shrink:0} @keyframes aduPulseDot{0%,100%{opacity:1}50%{opacity:.45}} .adu-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:8px;font-size:10px;font-weight:800;letter-spacing:.3px;white-space:nowrap} .adu-pill.user{background:rgba(107,113,148,.15);color:var(--s500);border:1px solid rgba(107,113,148,.2)} .adu-pill.admin{background:rgba(167,139,250,.1);color:var(--purple);border:1px solid rgba(167,139,250,.25)} .adu-pill.whale{background:rgba(237,31,58,.1);color:var(--gold);border:1px solid rgba(237,31,58,.3)} .adu-pill.banned{background:rgba(248,113,113,.1);color:var(--red);border:1px solid rgba(248,113,113,.3)} .adu-pill.flagged{background:rgba(251,146,60,.1);color:var(--orange);border:1px solid rgba(251,146,60,.25)} .adu-pill.new{background:rgba(96,165,250,.1);color:var(--blue);border:1px solid rgba(96,165,250,.25)} .adu-pill.atrisk{background:rgba(251,146,60,.1);color:var(--orange);border:1px solid rgba(251,146,60,.25)} .adu-pill.google{background:rgba(66,133,244,.1);color:#4285f4;border:1px solid rgba(66,133,244,.25)} .adu-lvl{display:flex;align-items:center;gap:6px} .adu-lvl-num{font-size:13px;font-weight:800;color:var(--s700);font-variant-numeric:tabular-nums;min-width:20px;text-align:right} .adu-lvl-bar{width:48px;height:5px;background:var(--surface2);border-radius:3px;overflow:hidden;position:relative;border:1px solid var(--border)} .adu-lvl-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--emerald),rgba(52,211,153,.5));border-radius:3px} .adu-credits{font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;font-size:13px} .adu-credits.zero{color:var(--s500)} .adu-entries{font-weight:700;color:var(--s700);font-variant-numeric:tabular-nums;font-size:13px} .adu-last-act{color:var(--s500);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap} .adu-last-act.hot{color:var(--emerald);font-weight:700} .adu-last-act.cold{color:var(--orange)} .adu-loc{font-size:11px;color:var(--s500);display:flex;align-items:center;gap:6px;white-space:nowrap} .adu-loc strong{color:var(--s800);font-weight:700} .flag-img{width:20px;height:15px;vertical-align:middle;border-radius:2px;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 1px var(--border)} .adu-menu-btn{width:26px;height:26px;border-radius:7px;background:transparent;border:1px solid transparent;color:var(--s500);font-size:16px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:inherit} .adu-menu-btn:hover{background:var(--surface2);border-color:var(--border);color:var(--s900)} .adu-menu-pop{position:absolute;right:10px;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-modal);min-width:180px;z-index:100;overflow:hidden} .adu-menu-item{padding:10px 14px;font-size:12px;font-weight:700;color:var(--s700);cursor:pointer;border:none;background:transparent;width:100%;text-align:left;font-family:inherit;display:block} .adu-menu-item:hover{background:var(--surface2);color:var(--s900)} .adu-menu-item.danger{color:var(--red)} .adu-menu-item.danger:hover{background:rgba(248,113,113,.08)} .adu-menu-item + .adu-menu-item{border-top:1px solid var(--border)} /* ─── Detail drawer ─── */ .adu-drawer{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;align-self:start;box-shadow:var(--shadow-modal);position:sticky;top:80px;max-height:calc(100vh - 96px);overflow-y:auto} .adu-dr-hdr{padding:18px 20px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(237,31,58,.05),transparent);position:relative} .adu-dr-close{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);color:var(--s500);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;font-family:inherit} .adu-dr-close:hover{color:var(--s900);border-color:var(--border2, #353a52)} .adu-dr-user{display:flex;align-items:center;gap:12px;margin-bottom:10px} .adu-dr-av{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:var(--gold);flex-shrink:0;background:linear-gradient(135deg,var(--surface2),var(--surface));border:1px solid var(--border)} .adu-dr-av.cosmetic-gold{background:radial-gradient(circle,rgba(237,31,58,.3),rgba(237,31,58,.1));border:2px solid var(--gold)} .adu-dr-av.cosmetic-emerald{background:radial-gradient(circle,rgba(52,211,153,.3),rgba(52,211,153,.1));border:2px solid var(--emerald);color:var(--emerald)} .adu-dr-av.cosmetic-purple{background:radial-gradient(circle,rgba(167,139,250,.3),rgba(167,139,250,.1));border:2px solid var(--purple);color:var(--purple)} .adu-dr-name{font-size:18px;font-weight:900;color:var(--s900);letter-spacing:-.3px} .adu-dr-email{font-size:12px;color:var(--s500);margin-top:1px;word-break:break-all} .adu-dr-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px} .adu-dr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:14px} .adu-dr-stat{background:var(--surface);padding:10px;text-align:center} .adu-dr-stat-val{font-size:17px;font-weight:900;color:var(--s900);font-variant-numeric:tabular-nums;line-height:1} .adu-dr-stat-val.gold{color:var(--gold)} .adu-dr-stat-val.emerald{color:var(--emerald)} .adu-dr-stat-lbl{font-size:9px;font-weight:700;color:var(--s400);text-transform:uppercase;letter-spacing:.7px;margin-top:3px} .adu-dr-section{padding:14px 18px;border-bottom:1px solid var(--border)} .adu-dr-section-title{font-size:10px;font-weight:800;color:var(--s400);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;display:flex;align-items:center;gap:8px} .adu-dr-section-title::before{content:'';display:inline-block;width:12px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px} .adu-dr-tl{position:relative;padding-left:16px} .adu-dr-tl::before{content:'';position:absolute;left:4px;top:4px;bottom:4px;width:1px;background:var(--border)} .adu-dr-tl-item{position:relative;padding:6px 0;font-size:11px} .adu-dr-tl-dot{position:absolute;left:-16px;top:10px;width:9px;height:9px;border-radius:50%;background:var(--surface2);border:2px solid var(--border)} .adu-dr-tl-dot.signup{background:rgba(52,211,153,.15);border-color:var(--emerald)} .adu-dr-tl-dot.win{background:rgba(52,211,153,.15);border-color:var(--emerald)} .adu-dr-tl-dot.spend{background:var(--gold-lt);border-color:var(--gold)} .adu-dr-tl-dot.referral{background:rgba(96,165,250,.15);border-color:var(--blue)} .adu-dr-tl-dot.entry{background:rgba(167,139,250,.15);border-color:var(--purple)} .adu-dr-tl-dot.credit{background:var(--surface2);border-color:var(--s400)} .adu-dr-tl-txt{color:var(--s700);line-height:1.5} .adu-dr-tl-txt strong{color:var(--s900)} .adu-dr-tl-time{color:var(--s500);font-size:10px;margin-top:1px} .adu-grant{padding:10px;background:var(--surface2);border:1px solid var(--border);border-radius:10px} .adu-grant-row{display:flex;gap:6px;margin-bottom:6px} .adu-grant-row:last-child{margin-bottom:0} .adu-grant-row input{flex:1;min-width:80px;padding:7px 10px;background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--s800);font-size:12px;font-family:inherit} .adu-grant-row input:focus{outline:none;border-color:var(--gold)} .adu-grant-plus{padding:7px 12px;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);color:var(--emerald);border-radius:7px;font-size:11px;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap} .adu-grant-minus{padding:7px 12px;background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:var(--red);border-radius:7px;font-size:11px;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap} .adu-note{padding:8px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;font-size:11px;color:var(--s700);font-style:italic;margin-bottom:6px} .adu-note-author{color:var(--s500);font-size:10px;font-style:normal;margin-top:2px} .adu-note-input{width:100%;padding:8px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--s800);font-size:12px;font-family:inherit;resize:vertical;min-height:40px;margin-bottom:6px;box-sizing:border-box} .adu-note-input:focus{outline:none;border-color:var(--gold)} .adu-credit-row{display:flex;gap:6px;align-items:center;padding:8px 0;font-size:11px;border-bottom:1px solid var(--border)} .adu-credit-row:last-child{border-bottom:none} .adu-credit-reason{flex:1;color:var(--s700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .adu-credit-time{color:var(--s500);font-size:10px;flex-shrink:0;margin-right:8px} .adu-credit-amt{font-weight:800;min-width:60px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0} .adu-credit-amt.plus{color:var(--emerald)} .adu-credit-amt.minus{color:var(--red)} .adu-dr-actions{padding:14px 18px;display:grid;grid-template-columns:1fr 1fr;gap:6px} .adu-dr-btn{padding:9px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--s700);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit} .adu-dr-btn:hover{border-color:var(--border2, #353a52);color:var(--s900)} .adu-dr-btn.full{grid-column:1 / -1} .adu-dr-btn.danger{border-color:rgba(248,113,113,.25);color:var(--red)} .adu-dr-btn.danger:hover{background:rgba(248,113,113,.08)} /* Modal for bulk actions */ .adu-modal-ov{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)} .adu-modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;max-width:460px;width:100%;box-shadow:var(--shadow-modal);overflow:hidden} .adu-modal-hdr{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .adu-modal-title{font-size:14px;font-weight:800;color:var(--s900)} .adu-modal-body{padding:16px 20px;display:grid;gap:10px} .adu-modal-body input,.adu-modal-body textarea{width:100%;padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--s800);font-size:13px;font-family:inherit;box-sizing:border-box} .adu-modal-body input:focus,.adu-modal-body textarea:focus{outline:none;border-color:var(--gold)} .adu-modal-body label{font-size:11px;font-weight:700;color:var(--s400);text-transform:uppercase;letter-spacing:.5px;margin-bottom:-6px} .adu-modal-foot{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;background:var(--surface2)} /* Nav badge for PickOne pending picks */ .sf-nav-btn{position:relative} .po-nav-badge{position:absolute;top:2px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);box-shadow:0 0 0 0 rgba(248,113,113,.3);animation:poNavBadgePulse 1.8s ease-in-out infinite;pointer-events:none} @keyframes poNavBadgePulse { 0%,100% {box-shadow:0 0 0 0 rgba(248,113,113,.35)} 50% {box-shadow:0 0 0 5px rgba(248,113,113,0)} } /* Post-pick pending modal */ .popend-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;animation:popendFadeIn .2s ease-out} .popend-modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-modal);animation:popendSlide .25s ease-out} .popend-top{padding:22px 24px;background:linear-gradient(135deg,rgba(52,211,153,.06),transparent 70%);border-bottom:1px solid var(--border);position:relative} .popend-close{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--s400);cursor:pointer;transition:all .15s} .popend-close:hover{background:var(--border);color:var(--s700)} .popend-check{width:46px;height:46px;border-radius:50%;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3);display:flex;align-items:center;justify-content:center;color:var(--emerald);font-size:22px;margin-bottom:12px;font-weight:800} .popend-title{font-size:18px;font-weight:800;color:var(--s900);margin-bottom:4px} .popend-sub{font-size:12px;color:var(--s400)} .popend-sub strong{color:var(--s700)} .popend-confirm{margin-top:14px;padding:12px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;gap:10px} .popend-confirm img{width:36px;height:36px;border-radius:8px;flex-shrink:0;object-fit:cover;background:var(--bg)} .popend-confirm-info{flex:1;min-width:0;overflow:hidden} .popend-confirm-name{font-size:13px;font-weight:700;color:var(--s800);white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .popend-confirm-meta{font-size:11px;color:var(--s400);margin-top:1px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .popend-pending-hdr{padding:16px 24px 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .popend-pending-icon{width:26px;height:26px;border-radius:50%;background:rgba(251,146,60,.12);border:1px solid rgba(251,146,60,.25);display:flex;align-items:center;justify-content:center;color:var(--orange);font-size:14px;flex-shrink:0} .popend-pending-label{font-size:13px;font-weight:800;color:var(--s900)} .popend-card{margin:0 16px 10px;padding:14px 16px;background:linear-gradient(135deg,rgba(251,146,60,.04),transparent 60%);border:1px solid rgba(251,146,60,.25);border-radius:12px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .2s} .popend-card:hover{border-color:var(--orange);transform:translateY(-1px)} .popend-card-icon{width:38px;height:38px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} .popend-card-info{flex:1;min-width:0;overflow:hidden} .popend-card-kind{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--orange);margin-bottom:3px} .popend-card-name{font-size:14px;font-weight:800;color:var(--s900);white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .popend-card-meta{font-size:11px;color:var(--s400);margin-top:2px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .popend-card-meta strong{color:var(--s700)} .popend-card-cta{padding:8px 16px;border-radius:999px;font-size:12px;font-weight:800;background:var(--gold);color:var(--on-accent);border:none;cursor:pointer;flex-shrink:0;white-space:nowrap;transition:filter .15s} .popend-card-cta:hover{filter:brightness(1.1)} .popend-card-cta.replace{background:var(--orange)} .popend-card-tag{padding:6px 12px;border-radius:999px;font-size:11px;font-weight:700;flex-shrink:0;white-space:nowrap} .popend-card-tag.locked{background:var(--surface2);color:var(--s500);border:1px solid var(--border)} .popend-card-tag.same{background:rgba(52,211,153,.1);color:var(--emerald);border:1px solid rgba(52,211,153,.25)} .popend-card-tag.blocked{background:rgba(107,113,148,.12);color:var(--s500);border:1px solid var(--border)} .popend-card.state-locked,.popend-card.state-same{opacity:.6;background:var(--surface2);border-color:var(--border)} .popend-card.state-empty-blocked,.popend-card.state-replace-blocked{background:linear-gradient(135deg,rgba(237,31,58,.02),transparent 60%);border-color:rgba(237,31,58,.12)} .popend-footer{padding:14px 20px 18px;display:flex;gap:10px;border-top:1px solid var(--border);background:rgba(10,12,18,.4)} .popend-btn{flex:1;padding:12px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--s700);transition:all .15s} .popend-btn:hover{background:var(--border);color:var(--s900)} .popend-btn.primary{background:var(--orange);color:var(--on-accent);border:none} .popend-btn.primary:hover{filter:brightness(1.1)} .popend-btn.muted{background:transparent;color:var(--s500)} @keyframes popendFadeIn{from{opacity:0}to{opacity:1}} @keyframes popendSlide{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}} @media(max-width:520px){ .popend-top{padding:16px 18px} .popend-pending-hdr{padding:12px 16px 6px} .popend-card{margin:0 10px 8px;padding:12px} .popend-card-name{font-size:13px} .popend-card-cta{padding:7px 12px;font-size:11px} .popend-footer{padding:12px 14px 14px;gap:6px} .popend-btn{padding:11px;font-size:11px} } /* Past gameday recap view */ .po-recap{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:12px} .po-recap-games{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px;padding:2px} .po-recap-game{min-width:130px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px;text-align:center} .po-recap-game .teams{font-size:11px;font-weight:700;color:var(--s800)} .po-recap-game .teams .w{color:var(--emerald)} .po-recap-game .teams .l{color:var(--s500)} .po-recap-game .score{font-size:14px;font-weight:900;color:var(--s900);margin-top:3px;font-variant-numeric:tabular-nums} .po-recap-game .tag{color:var(--s400);font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin-top:2px} .po-recap-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden} .po-recap-hdr{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} .po-recap-title{font-size:14px;font-weight:800;color:var(--s900)} .po-recap-meta{font-size:11px;color:var(--s400)} .po-recap-pick{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;min-width:0} .po-recap-pick:hover{background:var(--surface2)} .po-recap-pick.me{background:var(--gold-lt);border-left:3px solid var(--gold);padding-left:11px} .po-recap-pick:last-child{border-bottom:none} .po-recap-rank{font-size:14px;font-weight:800;min-width:22px;text-align:center;font-variant-numeric:tabular-nums;flex-shrink:0} .po-recap-rank.gold{color:var(--gold)} .po-recap-rank.orange{color:var(--orange)} .po-recap-rank.neutral{color:var(--s500)} .po-recap-avatar{width:28px;height:28px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--gold);flex-shrink:0} .po-recap-user{flex:1;min-width:0;overflow:hidden} .po-recap-uname{font-size:13px;font-weight:700;color:var(--s800);white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .po-recap-umeta{font-size:10px;color:var(--s400);margin-top:1px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .po-recap-pickinfo{display:flex;align-items:center;gap:6px;flex-shrink:0;min-width:0;padding:4px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;max-width:260px} .po-recap-pickinfo img{width:22px;height:22px;border-radius:5px;flex-shrink:0;object-fit:cover;background:var(--surface)} .po-recap-pickinfo .pname{font-size:11px;font-weight:700;color:var(--s800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px} .po-recap-pickinfo .pteam{font-size:10px;color:var(--s400);flex-shrink:0} .po-recap-pickinfo .pstats{font-size:10px;color:var(--s400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px} .po-recap-fp{font-size:15px;font-weight:900;color:var(--emerald);min-width:50px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0} .po-recap-fp.low{color:var(--s500)} .po-recap-fp.neg{color:var(--red)} .po-recap-missed{font-size:11px;color:var(--red);font-weight:700;flex-shrink:0;padding:3px 10px;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.2);border-radius:6px;white-space:nowrap} .po-recap-footer{padding:10px 14px;text-align:center;color:var(--s400);font-size:11px;font-style:italic} .po-recap-right{display:grid;gap:12px;align-content:start} .po-recap-t5-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);min-width:0} .po-recap-t5-row:last-child{border-bottom:none} .po-recap-t5-row.picked{background:rgba(237,31,58,.05)} .po-recap-t5-row img{width:30px;height:30px;border-radius:7px;flex-shrink:0;background:var(--surface2);object-fit:cover} .po-recap-t5-info{flex:1;min-width:0;overflow:hidden} .po-recap-t5-name{font-size:12px;font-weight:700;color:var(--s800);white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .po-recap-t5-meta{font-size:10px;color:var(--s400);margin-top:1px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .po-recap-t5-fp{font-size:14px;font-weight:900;color:var(--emerald);min-width:40px;text-align:right;flex-shrink:0} .po-recap-pickcount{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:5px;background:var(--gold-lt);color:var(--gold);border:1px solid rgba(237,31,58,.2);font-size:9px;font-weight:700;margin-left:4px;vertical-align:middle} @media (max-width:900px){ .po-recap{grid-template-columns:1fr} .po-recap-pickinfo{max-width:unset;flex:1} .po-recap-pickinfo .pstats{display:none} } @media (max-width:480px){ .po-recap-pickinfo .pname{max-width:70px} .po-recap-pickinfo .pteam{display:none} .po-recap-pick{padding:8px 10px;gap:6px} .po-recap-pick.me{padding-left:7px} .po-recap-avatar{width:24px;height:24px;font-size:10px} .po-recap-rank{min-width:18px;font-size:13px} .po-recap-fp{min-width:42px;font-size:14px} } .po-gl-inner{padding:0 14px 14px} .po-gl-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-top:4px;border-top:1px solid var(--border)} .po-gl-title{font-size:11px;font-weight:700;color:var(--s400);text-transform:uppercase;letter-spacing:1px} .po-gl-avg{font-size:10px;color:#d4af37;font-weight:600;margin-left:auto} .po-gl-bars{display:flex;align-items:flex-end;gap:3px;height:24px;margin-left:8px} .po-gl-bar{width:8px;border-radius:2px 2px 0 0} .po-gl-bar-good{background:linear-gradient(180deg,#d4af37,rgba(237,31,58,.3))} .po-gl-bar-ok{background:linear-gradient(180deg,rgba(200,205,225,.4),rgba(200,205,225,.15))} .po-gl-bar-dnp{background:rgba(239,68,68,.2);width:8px;height:3px;border-radius:1px} .po-gl-row{display:flex;align-items:center;gap:0;font-size:11px;padding:6px 0;border-bottom:1px solid var(--border)} .po-gl-row:last-child{border-bottom:none} .po-gl-date{width:44px;color:var(--s400);font-weight:600;font-size:10px;flex-shrink:0} .po-gl-vs{width:72px;color:var(--s500);font-weight:600;font-size:10px;flex-shrink:0} .po-gl-wl{width:28px;font-size:9px;font-weight:800;text-align:center;flex-shrink:0} .po-gl-w{color:#10b981} .po-gl-l{color:#ef4444} .po-gl-stats{flex:1;display:flex;gap:0;justify-content:flex-end} .po-gl-s{width:36px;text-align:center;color:rgba(200,205,225,1);font-weight:500;font-size:11px} .po-gl-sh{color:rgba(107,113,148,.6);font-size:9px;font-weight:700;text-transform:uppercase} .po-gl-fp{width:48px;text-align:right;font-weight:800;color:#d4af37;font-size:12px;flex-shrink:0} .po-gl-dnp{color:rgba(239,68,68,.6);font-style:italic;font-size:10px;flex:1;text-align:center} .po-gl-loading{text-align:center;padding:12px;font-size:11px;color:var(--s400)} @media(max-width:768px){ .po-player-card .po-row{gap:10px;padding:10px 12px} .po-player-card .po-row img{width:40px;height:40px} .po-inj-dot{width:11px;height:11px} .po-gl-inner{padding:0 10px 12px} .po-gl-bars{gap:2px;height:20px;margin-left:6px} .po-gl-bar{width:6px} .po-gl-bar-dnp{width:6px} .po-gl-title{font-size:10px;letter-spacing:.8px} .po-gl-avg{font-size:9px} /* Mobile: compact game rows */ .po-gl-date{width:32px;font-size:9px} .po-gl-vs{width:42px;font-size:9px} .po-gl-wl{width:16px;font-size:8px} .po-gl-s{width:28px;font-size:10px} .po-gl-sh{font-size:7px} .po-gl-fp{width:38px;font-size:11px} .po-gl-dnp{font-size:9px} } @keyframes poFadeSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @keyframes poIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes poGlowPulse{0%,100%{opacity:.3}50%{opacity:.9}} @keyframes poLineGrow{from{width:0}to{width:100%}} @keyframes poLineGrowV{from{height:0}to{height:100%}} @keyframes poCountUp{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}} @keyframes poFloatLogo{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-6px)}} @keyframes borderGlow{0%,100%{border-color:rgba(245,158,11,.15)}50%{border-color:rgba(245,158,11,.35)}} @keyframes poSubtlePulse{0%,100%{opacity:.06}50%{opacity:.12}} @keyframes poDotBounce{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.4);opacity:.7}} @media(max-width:768px){ .po-day{min-width:76px;padding:10px 6px 8px} .po-day-headshot{width:36px;height:36px} .po-day-games{font-size:18px} .po-day-score{font-size:14px} .po-phase{padding:6px 2px} .po-phase-name{font-size:8px} .po-phase-mult{font-size:12px} } /* ═══ UI Improvements ═══ */ /* Skeleton loading */ @keyframes skelShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}} .skel{background:linear-gradient(90deg,var(--surface2) 25%,var(--border) 50%,var(--surface2) 75%);background-size:200% 100%;animation:skelShimmer 1.5s ease-in-out infinite;border-radius:6px} .skel-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px} .skel-row{display:flex;gap:8px;margin-bottom:10px} /* Micro-interactions */ .mi-lift{transition:all .2s cubic-bezier(.4,0,.2,1)} .mi-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)} .mi-lift:active{transform:scale(.98)} .mi-card{transition:border-color .15s,transform .2s cubic-bezier(.4,0,.2,1)} .mi-card:hover{transform:translateY(-1px);border-color:var(--gold) !important} /* Loading button */ @keyframes btnSpin{to{transform:rotate(360deg)}} .btn-loading{position:relative;color:transparent !important;pointer-events:none} .btn-loading::after{content:'';position:absolute;inset:0;margin:auto;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:btnSpin .6s linear infinite} /* ─── PlayGurus pill button system ─────────────────────────────────── * Canonical pair from the existing playgurus.com brand: outlined-secondary * (Log in) on the left, solid-primary (Create Account) on the right, both * pill-shape and identical height. See branding/REFERENCE-NOTES.md. */ .btn-primary, .btn-secondary{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:14px 28px; border-radius:9999px; font-weight:700;font-size:16px;line-height:1; font-family:inherit; cursor:pointer; text-decoration:none; transition:background-color .15s ease,border-color .15s ease,transform .1s ease; white-space:nowrap; } .btn-primary{background:var(--cta-primary);color:var(--cta-text-on-primary);border:2px solid transparent} .btn-primary:hover{background:var(--cta-primary-hover)} .btn-primary:active{background:var(--cta-primary-active);transform:translateY(1px)} .btn-primary:disabled{background:var(--surface2);color:var(--s500);cursor:not-allowed} .btn-secondary{background:#fff;color:var(--s900);border:2px solid var(--s900)} .btn-secondary:hover{background:var(--surface2)} .btn-secondary:active{background:var(--border);transform:translateY(1px)} .btn-secondary:disabled{color:var(--s400);border-color:var(--s400);cursor:not-allowed} /* Compact size variant */ .btn-primary.is-sm,.btn-secondary.is-sm{padding:9px 18px;font-size:13px} /* Full-width variant (mobile CTA stacks) */ .btn-primary.is-block,.btn-secondary.is-block{display:flex;width:100%} /* Section header pattern: title + (count) + right-aligned red "Show all >" link */ .section-header{display:flex;align-items:baseline;justify-content:space-between;margin:24px 0 12px} .section-header__title{font-size:22px;font-weight:800;color:var(--s900);letter-spacing:-.01em} .section-header__count{margin-left:8px;color:var(--s500);font-weight:700;font-size:18px} .section-header__more{color:var(--cta-primary);font-weight:700;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:4px} .section-header__more:hover{text-decoration:underline} /* LIVE badge — small red pill (matches existing playgurus.com convention) */ .live-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:9999px;background:var(--cta-primary);color:#fff;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;line-height:1} /* Dark hero panel — for promo/score sections that break the light scheme intentionally */ .hero-dark{background:var(--surface3);color:#fff;border-radius:16px;padding:24px;position:relative;overflow:hidden} .hero-dark .hero-dark__title{font-size:32px;font-weight:800;line-height:1.1;color:#fff;margin-bottom:8px} .hero-dark .hero-dark__sub{color:rgba(255,255,255,.85);font-size:15px;line-height:1.5;margin-bottom:16px} /* Glass overlay */ .glass-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:glassIn .3s ease} .glass-modal{background:rgba(var(--surface-rgb),1);border:1px solid var(--border);border-radius:20px;padding:32px;max-width:340px;width:90%;text-align:center;box-shadow:var(--shadow-modal);animation:glassModalIn .4s cubic-bezier(.34,1.56,.64,1)} @keyframes glassIn{from{opacity:0}to{opacity:1}} @keyframes glassModalIn{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}} /* Score delta flash */ @keyframes deltaFlash{0%{opacity:0;transform:translateY(4px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1}100%{opacity:0;transform:translateY(-4px)}} .delta-badge{animation:deltaFlash 2s ease both;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;position:absolute;top:-8px;right:-4px} .delta-pos{background:rgba(16,185,129,.15);color:var(--emerald)} .delta-neg{background:rgba(248,113,113,.15);color:#f87171} /* Empty state */ .sf-empty{text-align:center;padding:48px 24px;position:relative} .sf-empty-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--gold-glow),transparent 70%);pointer-events:none;opacity:.3} .sf-empty-ill{font-size:48px;margin-bottom:12px;opacity:.4} .sf-empty h3{font-size:16px;font-weight:700;color:var(--s800);margin-bottom:4px} .sf-empty p{font-size:12px;color:var(--s400);margin-bottom:16px;max-width:300px;margin-left:auto;margin-right:auto} .sf-empty-cta{padding:10px 24px;border-radius:8px;font-size:13px;font-weight:700;background:var(--emerald);color:var(--on-accent);border:none;cursor:pointer} /* ─── Chat ─── */ .chat-fab{position:fixed;bottom:20px;right:16px;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#d4982a);color:#000;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(237,31,58,.4);z-index:80;font-size:20px;transition:transform .2s} .chat-fab:hover{transform:scale(1.08)} .chat-fab-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)} .chat-panel{position:fixed;right:16px;bottom:80px;width:360px;max-height:520px;background:var(--surface);border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-modal);z-index:81;animation:chatSlideUp .2s ease} @keyframes chatSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .chat-panel-hdr{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0} .chat-panel-hdr h3{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px} .chat-online-dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);display:inline-block;animation:chatPulse 2s infinite} @keyframes chatPulse{0%,100%{opacity:1}50%{opacity:.4}} .chat-msgs{flex:1;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:1px} .chat-msgs::-webkit-scrollbar{width:4px} .chat-msgs::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px} .chat-msg{display:flex;gap:8px;align-items:flex-start;padding:5px 6px;border-radius:8px} .chat-msg:hover{background:var(--surface2)} .chat-msg.grouped .chat-msg-av{visibility:hidden} .chat-msg.grouped .chat-msg-meta{display:none} .chat-msg-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0;cursor:pointer} .chat-msg-meta{display:flex;align-items:baseline;gap:5px} .chat-msg-name{font-size:11px;font-weight:700} .chat-msg-time{font-size:9px;color:var(--s400)} .chat-msg-text{font-size:12.5px;color:var(--s700);line-height:1.4;word-wrap:break-word;margin-top:1px} .chat-msg-text .mention{color:var(--blue);font-weight:600;background:rgba(96,165,250,.1);padding:0 2px;border-radius:2px} .chat-msg-gif{margin-top:3px;border-radius:8px;overflow:hidden;max-width:180px;border:1px solid var(--border);position:relative} .chat-msg-gif img{width:100%;display:block} .chat-msg-gif .gif-label{position:absolute;bottom:3px;left:3px;padding:1px 4px;border-radius:2px;font-size:7px;font-weight:800;background:rgba(0,0,0,.6);color:#fff;letter-spacing:.5px} .chat-msg-system{font-size:10px;color:var(--s400);text-align:center;padding:5px 8px;background:var(--surface2);border-radius:6px;margin:3px 0} .chat-msg-reactions{display:flex;gap:2px;margin-top:3px;flex-wrap:wrap} .chat-msg-reaction{display:flex;align-items:center;gap:2px;padding:1px 5px;border-radius:999px;font-size:12px;border:1px solid var(--border);background:var(--surface2);cursor:pointer;transition:all .1s} .chat-msg-reaction:hover{border-color:var(--s400)} .chat-msg-reaction.mine{border-color:var(--blue);background:rgba(96,165,250,.08)} .chat-msg-reaction .rc{font-size:9px;color:var(--s400);font-weight:600} .chat-msg-reply{font-size:10px;color:var(--s400);border-left:2px solid var(--border);padding:1px 0 1px 6px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chat-typing{padding:3px 14px;font-size:10px;color:var(--s400);min-height:18px;display:flex;align-items:center;gap:4px;flex-shrink:0} .chat-typing-dots{display:flex;gap:2px} .chat-typing-dots span{width:3px;height:3px;border-radius:50%;background:var(--s400);animation:chatTdot .8s infinite} .chat-typing-dots span:nth-child(2){animation-delay:.15s} .chat-typing-dots span:nth-child(3){animation-delay:.3s} @keyframes chatTdot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}} .chat-input-area{padding:8px 10px;border-top:1px solid var(--border);flex-shrink:0} .chat-input-row{display:flex;gap:5px;align-items:flex-end} .chat-input{flex:1;padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:var(--surface2);color:var(--s900);font-size:13px;font-family:inherit;resize:none;min-height:36px;max-height:80px;outline:none} .chat-input:focus{border-color:var(--gold)} .chat-input::placeholder{color:var(--s400)} .chat-input-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--s500);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s} .chat-input-btn:hover{border-color:var(--gold);color:var(--gold)} .chat-send{width:32px;height:32px;border-radius:8px;border:none;background:var(--gold);color:#000;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:800} .chat-emoji-popup{position:absolute;bottom:50px;left:8px;width:280px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-modal);overflow:hidden;display:none;z-index:50} .chat-emoji-popup.open{display:block} .chat-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;padding:6px;max-height:160px;overflow-y:auto} .chat-emoji-grid span{font-size:18px;padding:3px;text-align:center;cursor:pointer;border-radius:4px} .chat-emoji-grid span:hover{background:var(--surface2)} .chat-gif-popup{position:absolute;bottom:50px;left:8px;width:290px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-modal);overflow:visible;display:none;z-index:50} .chat-gif-popup.open{display:block} .chat-gif-search{width:100%;padding:8px 10px;border:none;border-bottom:1px solid var(--border);background:var(--surface2);color:var(--s900);font-size:12px;outline:none} .chat-gif-search::placeholder{color:var(--s400)} .chat-gif-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;padding:6px;max-height:200px;overflow-y:auto} .chat-gif-item{border-radius:6px;overflow:hidden;cursor:pointer;background:var(--surface2);aspect-ratio:16/10} .chat-gif-item img{width:100%;height:100%;object-fit:cover;display:block} .chat-gif-item:hover{opacity:.8} @media(max-width:768px){ .chat-panel{right:0;left:0;bottom:0;width:100%;max-height:65vh;height:65vh;border-radius:20px 20px 0 0;position:fixed;z-index:110;transition:transform .25s ease} .chat-panel .chat-drag-handle{display:flex} .chat-fab{bottom:72px;right:12px;width:48px;height:48px;z-index:100} } .chat-drag-handle{display:none;justify-content:center;padding:8px 0 2px;cursor:grab;flex-shrink:0} .chat-drag-handle span{width:36px;height:4px;border-radius:999px;background:var(--border)} /* ===== PickOne leaderboard (movement + picks) ===== */ .po-lb{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden} .po-lb-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)} .po-lb-title{font-size:14px;font-weight:700;color:var(--s900)} .po-lb-count{font-size:11px;color:var(--s400)} .po-mover{display:flex;align-items:center;gap:10px;padding:9px 16px; background:linear-gradient(90deg,var(--gold-lt),transparent 80%); border-bottom:1px solid var(--gold-glow);font-size:12px;flex-wrap:wrap} .po-mover-badge{font-size:9px;font-weight:800;letter-spacing:.5px;padding:3px 8px;border-radius:999px; background:var(--gold);color:var(--on-accent);text-transform:uppercase;white-space:nowrap} .po-mover-txt{color:var(--s700);flex:1;min-width:0} .po-mover-txt b{color:var(--s900);font-weight:700} .po-mover-delta{color:var(--emerald);font-weight:700;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums} .po-row-wrap{border-bottom:1px solid var(--border)} .po-row-wrap:last-child{border-bottom:none} .po-row{display:grid;grid-template-columns:26px 30px 1fr auto;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:background .12s} .po-row:hover{background:var(--surface2)} .po-row.me{background:var(--gold-lt);border-left:2px solid var(--gold);padding-left:14px} .po-rank{position:relative;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;font-size:14px;color:var(--s500);letter-spacing:-.3px} .po-rank.r1{color:var(--gold);filter:drop-shadow(0 0 8px var(--gold-glow))} .po-rank.r2{color:var(--s500)} .po-rank.r3{color:var(--orange)} .po-peak{position:absolute;top:-3px;right:-7px;font-size:9px;color:var(--gold);filter:drop-shadow(0 0 4px var(--gold-glow))} .po-av{display:flex;align-items:center;justify-content:center;flex-shrink:0} .po-crown{display:inline-flex;align-items:center;color:var(--gold);font-size:12px} .po-you{font-size:10px;font-weight:700;color:var(--gold);letter-spacing:.2px} .po-nm{min-width:0} .po-name{font-size:13px;font-weight:700;color:var(--s800);display:flex;align-items:center;gap:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .po-meta{font-size:11px;margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .po-pick-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%; padding:2px 7px 2px 3px;border-radius:999px; background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.22); font-size:10.5px;font-weight:600;color:var(--s700);overflow:hidden} .po-pick-chip.hot{background:rgba(16,185,129,.09);border-color:rgba(16,185,129,.3);color:var(--s900)} .po-pick-chip.locked{background:rgba(139,144,176,.05);border-color:rgba(139,144,176,.18);color:var(--s500);padding:2px 9px 2px 7px;letter-spacing:.3px} .po-pick-chip.locked .ic{font-size:9.5px;opacity:.7;margin-right:1px} .po-pick-chip .p-av{width:16px;height:16px;border-radius:999px;object-fit:cover;flex-shrink:0;background:var(--surface2)} .po-pick-chip .p-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px} .po-pick-chip .p-pts{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.2px} .po-pick-chip .live-dot{width:5px;height:5px;border-radius:999px;background:var(--emerald);animation:po-pulse 1.4s ease-in-out infinite} @keyframes po-pulse{0%,100%{opacity:.35}50%{opacity:1}} .po-pick-chip.no-pick{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.28);color:var(--red);padding:2px 9px 2px 7px;letter-spacing:.2px;font-weight:700} .po-pick-chip.no-pick .ic{font-size:11px;font-weight:800;line-height:1} .po-ahead{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700; padding:2px 7px;border-radius:999px; background:var(--gold-lt);border:1px solid var(--gold-glow);color:var(--gold);letter-spacing:.2px;white-space:nowrap} .po-right{display:flex;align-items:center;gap:10px} .po-score-stack{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.1;min-width:58px} .po-deficit{font-size:9.5px;color:var(--s500);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:3px; padding:1px 6px;border-radius:4px;background:var(--surface2);border:1px solid var(--border);font-variant-numeric:tabular-nums;white-space:nowrap} .po-deficit.leader{color:var(--gold);background:var(--gold-lt);border-color:var(--gold-glow)} .po-arr{font-size:11px;font-weight:800;min-width:30px;text-align:right;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;justify-content:flex-end;gap:2px;letter-spacing:.1px} .po-arr.up{color:var(--emerald)} .po-arr.down{color:var(--red)} .po-arr.same{color:var(--s400);opacity:.45;font-weight:500} .po-arr.mega-up{background:rgba(16,185,129,.14);color:var(--emerald);border-radius:8px;padding:2px 7px 2px 4px;box-shadow:0 0 0 1px rgba(16,185,129,.3), 0 2px 6px rgba(16,185,129,.12);font-size:12px;gap:3px} .po-arr.mega-down{background:rgba(248,113,113,.12);color:var(--red);border-radius:8px;padding:2px 7px 2px 4px;box-shadow:0 0 0 1px rgba(248,113,113,.25);font-size:12px;gap:3px} .po-arr .emo{font-size:12px} .po-score{font-weight:800;color:var(--emerald);font-variant-numeric:tabular-nums;font-size:15px;text-align:right;letter-spacing:-.3px} .po-caret{font-size:9px;color:var(--s400)} .po-lb-expand{background:var(--bg);border-top:1px solid var(--border);padding:8px 16px 10px 48px} @media(max-width:520px){ .po-row{grid-template-columns:22px 28px 1fr auto;gap:8px;padding:10px 12px} .po-row.me{padding-left:10px} .po-rank{font-size:13px} .po-name{font-size:13px} .po-pick-chip .p-name{max-width:70px} .po-score{font-size:14px} .po-score-stack{min-width:50px} .po-deficit{font-size:9px;padding:1px 5px;letter-spacing:.3px} .po-arr{min-width:26px;font-size:10.5px} .po-arr.mega-up,.po-arr.mega-down{font-size:11.5px;padding:2px 6px 2px 4px} .po-right{gap:8px} .po-lb-expand{padding-left:20px} .po-mover{padding:9px 12px;font-size:11.5px} } @keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* Animated update on an FP / score value. Fires when the in-place updater notices a value change (applyLivePoll) — we want a "fade out → swap → fade back in with a brief glow" feel rather than a hard pop, since the new value is already in the textNode by the time the keyframes start. */ @keyframes fpPulse { 0% { opacity: 0.35; transform: scale(0.92); color: var(--s500); text-shadow: none; } 18% { opacity: 1; transform: scale(1.18); color: var(--gold); text-shadow: 0 0 14px rgba(237,31,58,.65); } 55% { opacity: 1; transform: scale(1.04); color: var(--emerald); text-shadow: 0 0 8px rgba(52,211,153,.40); } 100% { opacity: 1; transform: scale(1); text-shadow: none; } } .fp-pulse { animation: fpPulse 1.1s cubic-bezier(.22,.61,.36,1); transform-origin: center; } @media (prefers-reduced-motion: reduce) { .fp-pulse { animation: none; } }