:root{ /* slate theme: noticeably lighter content surfaces, dark sidebar kept for contrast */ --bg:#171d2b; --bg2:#0c1120; --card:#202839; --card2:#29324a; --elev:#313c58; /* lighter "frosted" surface (top bar, tiles, controls) */ /* white borders for definition on the dark surfaces (light theme overrides below) */ --border:rgba(255,255,255,.6); --border2:rgba(255,255,255,.85); --pic-border:var(--accent); /* blue ring for player avatars (matches Compare) */ --text:#eff2f9; --muted:#9aa4ba; --muted2:#727d96; --accent:#5570f0; --accent2:#7d5cf5; --accent-soft:#2c3b68; --green:#34c46a; --red:#e5484d; --gold:#e8b04b; --line:rgba(150,158,178,.22); /* chart grids / pitch lines (theme-neutral) */ --radius:14px; --sb:248px; } /* keep the sidebar a touch darker than the lighter content for a clear split */ .sidebar{--bg2:#0c1120; --card:#141b2c; --card2:#1b2338; --border:rgba(255,255,255,.45); --muted:#7f8aa3} /* ---- LIGHT THEME (toggle adds .light on ) ---- */ html.light{ /* soft light (no pure white): muted grey page, off-white lifted cards */ --bg:#dfe3ec; --bg2:#eef1f7; --card:#f4f6fb; --card2:#e9edf5; --elev:#e1e6f0; --border:#d2d8e6; --border2:#c2cadc; --pic-border:var(--accent); --text:#222a3a; --muted:#5b6478; --muted2:#828ca2; --accent:#5570f0; --accent2:#7d5cf5; --accent-soft:#dde3f7; --green:#1f9d57; --red:#d63f44; --gold:#b9871d; --line:rgba(40,50,75,.16); } html.light .sidebar{--bg2:#e8ebf3; --card:#f4f6fb; --card2:#e9edf5; --border:#d2d8e6; --muted:#5b6478} *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} .muted{color:var(--muted)} .up{color:var(--green)} .down{color:var(--red)} /* layout */ .app{display:grid; grid-template-columns:var(--sb) 1fr; min-height:100vh} .sidebar{background:var(--bg2); border-right:2px solid var(--border); padding:20px 14px 14px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column} .main{padding:0 26px 40px; max-width:1640px} /* sidebar */ .brand{display:flex; align-items:center; gap:10px; padding:6px 8px 14px; font-weight:800; font-size:20px; letter-spacing:.5px} .brand .logo{width:30px;height:30px} .sb-scroll{flex:1; overflow-y:auto; margin:0 -6px; padding:0 6px} .sb-div{height:1px; background:var(--border); margin:14px 12px} .nav{display:flex; flex-direction:column; gap:2px} .navi{display:flex; align-items:center; gap:13px; padding:10px 12px; border-radius:10px; color:var(--muted); font-weight:500; font-size:14.5px; position:relative} .navi .ic{width:20px;height:20px;flex:none;color:var(--muted2)} .navi .t{flex:1} .navi:hover{background:var(--card2); color:var(--text)} .navi:hover .ic{color:var(--text)} .navi.active{background:linear-gradient(90deg,var(--accent-soft),transparent); color:var(--text); box-shadow:inset 3px 0 0 var(--accent)} .navi.active .ic{color:var(--accent)} .navi .chev{display:flex;color:var(--muted2)} .navi .chev .ic{width:16px;height:16px} .navi .livedot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red)} .navi.league .sq{width:16px;height:16px;border-radius:5px;flex:none} .navi.league{color:var(--text);padding:7px 12px} .navi.group-active .ic{color:var(--accent)} .subnav{display:flex;flex-direction:column;gap:2px;position:relative;margin:1px 0 3px} .subnav::before{content:'';position:absolute;left:21px;top:3px;bottom:7px;width:1.5px; background:var(--border);border-radius:2px} .navi.sub{padding:7px 12px 7px 38px;font-size:13.5px} .navi.sub .ic{width:17px;height:17px} .navi.sub.active{box-shadow:inset 3px 0 0 var(--accent)} .nav-label{display:flex;align-items:center;justify-content:space-between; font-size:11px; letter-spacing:1.4px; color:var(--muted2); font-weight:700; padding:4px 12px 8px; text-transform:uppercase} .nav-label .chev{display:flex;color:var(--muted2)} .nav-label .chev .ic{width:15px;height:15px} .pro{margin-top:16px;display:flex;align-items:center;gap:12px; background:linear-gradient(160deg,var(--accent-soft),var(--card2));border:1px solid var(--border2); border-radius:14px;padding:14px} .pro .pro-ic{display:flex} .pro .pro-ic .ic{width:30px;height:30px;color:var(--accent2)} .pro-tx{flex:1} .pro h4{font-size:13px;letter-spacing:.6px;color:var(--accent2);margin-bottom:3px;font-weight:800} .pro p{color:var(--muted);font-size:12px;line-height:1.35} .pro .chev{display:flex;color:var(--muted)}.pro .chev .ic{width:16px;height:16px} .sb-user{display:flex;align-items:center;gap:11px;padding:12px 10px 4px;margin-top:8px; border-top:1px solid var(--border);color:var(--text)} .sb-user .ava{position:relative;width:40px;height:40px;border-radius:50%;flex:none;display:flex; align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent2))} .sb-user .ava .on{position:absolute;right:0;bottom:1px;width:10px;height:10px;border-radius:50%; background:var(--green);border:2px solid var(--bg2)} .sb-user .u-tx{flex:1;display:flex;flex-direction:column;line-height:1.25} .sb-user .u-tx b{font-size:14px} .sb-user .u-tx span{font-size:12px;color:var(--muted)} .sb-user .chev{display:flex;color:var(--muted2)}.sb-user .chev .ic{width:16px;height:16px} .btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;border:none;cursor:pointer; border-radius:10px;font-weight:600;font-size:13px;padding:10px 16px;color:#fff;font-family:inherit} .btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent2))} .btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--text)} .btn-block{width:100%} /* topbar */ .topbar{display:flex;align-items:center;gap:18px;padding:14px 26px;margin:0 -26px 6px;position:sticky;top:0; background:var(--elev);z-index:5;backdrop-filter:blur(8px); border-bottom:1px solid var(--border2)} .search{flex:1;display:flex;align-items:center;gap:10px;background:var(--elev);border:2px solid var(--border2); border-radius:12px;padding:11px 14px;color:var(--muted);max-width:760px} .search input{flex:1;background:none;border:none;color:var(--text);outline:none;font-size:14px;font-family:inherit} .search .kbd{border:1px solid var(--border2);border-radius:6px;padding:1px 7px;font-size:12px;color:var(--muted)} .tb-icons{margin-left:auto;display:flex;align-items:center;gap:16px;color:var(--muted)} .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3a4adb,#7d5cf5)} .badge{position:relative} .badge::after{content:attr(data-n);position:absolute;top:-6px;right:-8px;background:var(--accent); color:#fff;font-size:10px;font-weight:700;border-radius:9px;padding:1px 5px} /* cards & grid */ .card{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);padding:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 6px 20px rgba(0,0,0,.28)} .card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .card-h h3{font-size:12.5px;letter-spacing:1.1px;color:var(--muted);font-weight:700;text-transform:uppercase} .see{color:var(--accent);font-size:12.5px;font-weight:600} .grid{display:grid;gap:18px} .breadcrumb{padding:18px 0 8px;color:var(--muted);font-size:13px} .breadcrumb b{color:var(--text)} /* list rows (rankings/trending) */ .prow{display:flex;align-items:center;gap:12px;padding:9px 4px;border-radius:8px;cursor:pointer} .prow:hover{background:var(--card2)} .prow .rk{width:18px;text-align:center;color:var(--muted);font-weight:700} .prow .pic{width:34px;height:34px;border-radius:50%;background:var(--card2);flex:none; background-size:cover;border:1px solid var(--pic-border)} .prow .nm{font-weight:600;font-size:13.5px} .prow .sub{color:var(--muted);font-size:12px} .prow .end{margin-left:auto;display:flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap} .prow .end .unit{color:var(--muted);font-weight:600;font-size:10.5px;letter-spacing:.2px} /* home "Games" rail: icon + title/tagline rows linking into each game */ .glist{display:flex;flex-direction:column} .grow{display:flex;align-items:center;gap:11px;padding:9px 6px;border-radius:8px;cursor:pointer;color:inherit;text-decoration:none} .grow:hover{background:var(--card2)} .grow .gic{width:34px;height:34px;border-radius:9px;background:var(--card2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--accent2)} .grow .gic .ic{width:18px;height:18px} .grow .gtx{display:flex;flex-direction:column;min-width:0} .grow .gtx b{font-weight:600;font-size:13.5px} .grow .gtx span{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .grow .gchev{margin-left:auto;display:flex;color:var(--muted2)} .grow .gchev .ic{width:16px;height:16px} .grow:hover .gchev{color:var(--accent2)} .ratingchip{width:34px;height:34px;border-radius:50%;border:2px solid var(--accent); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px} .flag{width:18px;height:13px;border-radius:2px;background:#2a3350;display:inline-block} /* home hero */ .hero{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08); background:radial-gradient(120% 140% at 80% 20%,var(--accent-soft) 0%,var(--card2) 60%,var(--card) 100%); padding:34px;min-height:312px} .hero h1,.hero p,.hero .cta,.hero-stats{position:relative;z-index:2} .hero-deco{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} /* featured players (Mbappé behind, Yamal front) as transparent cutouts bleeding out of the hero's right edge */ .hero-figs{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .hero-fig{position:absolute;top:5%;display:block;pointer-events:auto;transition:transform .28s ease} .hero-fig img{display:block;height:100%;width:auto;object-fit:contain;object-position:top; filter:drop-shadow(0 12px 26px rgba(0,0,0,.5))} .hero-fig.fig-back{right:16%;height:132%;opacity:.92;z-index:1} .hero-fig.fig-front{right:1%;height:150%;z-index:2} .hero-fig:hover{transform:translateY(-5px)} .hero-fig.fig-front:hover{z-index:3} @media(max-width:1040px){.hero-figs{display:none}} .hero h1{font-size:40px;line-height:1.05;font-weight:800;letter-spacing:-.5px} .hero h1 .accent{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent} .hero p{color:var(--muted);margin:14px 0 22px;font-size:15px} .hero .cta{display:flex;gap:12px} .hero-stats{display:flex;gap:30px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)} .hero-stats .s b{font-size:20px;font-weight:800;display:block} .hero-stats .s span{color:var(--muted);font-size:12px} /* live matches */ .match{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border)} .match:last-child{border-bottom:none} .match .min{color:var(--muted);font-weight:700;font-size:12px;white-space:nowrap} .match .live-min{color:var(--green)} .match .tm{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;min-width:0} .match .tm .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .match .tm.away{justify-content:flex-end} .match .tm.won .nm{color:#fff} .match .crest{width:20px;height:20px;border-radius:4px;background:#222b44;flex:none} .match .nflag{font-size:18px;line-height:1;flex:none} .match .sc{font-weight:800;font-size:15px;text-align:center;letter-spacing:1px;white-space:nowrap} .match .live{color:var(--red);font-weight:700;font-size:10px;text-align:right;white-space:nowrap} .match .tag{color:var(--muted);font-size:10px;text-align:right;white-space:nowrap} .live-group{margin-bottom:16px} /* Live Matches page (#feed): larger, roomier match rows than the compact home widget */ #feed .live-group{margin-bottom:22px} #feed .live-group .card-h{margin-bottom:6px} #feed .live-group .card-h h3{font-size:17px} #feed .match{gap:16px;padding:16px 10px} #feed .match .min{font-size:15px;min-width:46px} #feed .match .tm{gap:12px;font-size:16.5px} #feed .match .crest{width:32px;height:32px;border-radius:7px} #feed .match .nflag{font-size:28px} #feed .match .sc{font-size:23px;letter-spacing:1.5px;min-width:62px} #feed .match .live{font-size:12px} #feed .match .tag{font-size:12px} #feed .tabs .tab{font-size:15px} /* standings table */ table{width:100%;border-collapse:collapse;font-size:13px} th{color:var(--muted);font-weight:600;text-align:left;padding:8px 6px;font-size:12px} td{padding:9px 6px;border-top:1px solid var(--border)} .form-pill{display:inline-flex;width:18px;height:18px;border-radius:5px;align-items:center;justify-content:center; font-size:10px;font-weight:800;color:#fff;margin-right:3px} .form-W{background:var(--green)} .form-D{background:#6b7280} .form-L{background:var(--red)} .tabs{display:flex;gap:18px;margin-bottom:8px} .tabs .tab{color:var(--muted);font-weight:600;font-size:13px;padding-bottom:8px;cursor:pointer} .tabs .tab.active{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)} /* spotlight */ .spot{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .spot .s{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center} .spot .s .lab{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px} .spot .s .pic{width:62px;height:62px;border-radius:50%;margin:12px auto;background:var(--card2);border:1px solid var(--pic-border)} .spot .s .nm{font-weight:700;font-size:13.5px} .spot .s .v{color:var(--accent);font-weight:700;font-size:13px;margin-top:3px} /* tof pitch */ .pitch{background:linear-gradient(160deg,#1e7d46,#15613a);border:1px solid var(--border);border-radius:10px; padding:14px;display:grid;grid-template-rows:repeat(4,1fr);gap:10px;min-height:300px} .pline{display:flex;justify-content:space-around} .pp{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px} .pp .dot{width:34px;height:34px;border-radius:50%;background:var(--card2);border:1px solid var(--pic-border)} /* player header */ .ph{display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px} .ph .photo{width:140px;height:170px;border-radius:12px;background:var(--card2);border:1px solid var(--pic-border)} .ph h1{font-size:34px;font-weight:800;display:flex;align-items:center;gap:10px} .verified{color:var(--accent)} .ph .team{color:var(--muted);margin:6px 0 16px;font-size:14px} .ph .team .pos{color:var(--accent);font-weight:600} .ph .meta{display:flex;flex-wrap:wrap;gap:14px 26px;margin-bottom:18px} .ph .meta .m span{color:var(--muted);font-size:12px;display:block;margin-bottom:3px} .ph .meta .m b{font-size:15px;font-weight:700} /* rating gauge */ .gauge-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%} .gauge{position:relative;width:200px;height:120px} .gauge .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px} .gauge .val b{font-size:40px;font-weight:800;line-height:1} .gauge .cls{color:var(--accent);font-weight:700;margin-top:6px} .gauge .top{color:var(--muted);font-size:12px;margin-top:2px} .gauge.sm{width:124px;height:78px} .gauge.sm .val b{font-size:26px} .dual{display:flex;justify-content:space-between;gap:6px;margin-top:6px} .rgauge{display:flex;flex-direction:column;align-items:center;flex:1 1 0;min-width:0} .rgauge .lbl{color:var(--muted);font-size:11px;letter-spacing:1px;font-weight:700;text-transform:uppercase} .rgauge .cls{color:var(--accent);font-weight:700;font-size:12px;margin-top:4px;text-align:center} /* stat tiles */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:12px} .tile{background:var(--card2);border:1px solid var(--border2);border-radius:12px;padding:14px 10px;text-align:center} .tile .ic{color:var(--muted);font-size:16px;margin-bottom:8px} .tile b{font-size:20px;font-weight:800;display:block} .tile span{color:var(--muted);font-size:11px;line-height:1.2;display:block;margin-top:4px} /* strengths */ .sw h5{font-size:11px;letter-spacing:.8px;font-weight:700;margin:2px 0 8px} .sw .ok{color:var(--green)} .sw .bad{color:var(--red)} .sw li{list-style:none;display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px} .sw .mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px} .sw .mini .m{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:10px;text-align:center} .sw .mini .m b{font-size:15px;display:block} .sw .mini .m span{font-size:10.5px;color:var(--muted)} /* chips */ .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{background:var(--card2);border:1px solid var(--border2);border-radius:20px;padding:6px 13px;font-size:12.5px;color:var(--text)} .heat{border:1px solid var(--border);border-radius:10px;min-height:230px; background:radial-gradient(circle at 50% 62%,rgba(229,72,77,.8),rgba(232,176,75,.5) 22%,rgba(52,196,106,.25) 38%,transparent 55%), linear-gradient(var(--card2),var(--card2))} .tech .t{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px} .tech .bar{flex:1;height:6px;border-radius:4px;background:var(--card2);overflow:hidden} .tech .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))} .bo-bar{flex:1;height:6px;border-radius:4px;background:var(--card2);overflow:hidden;margin:0 10px} .bo-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))} /* Ballon d'Or predictor row: avatar + name/G+A + a fixed-width share bar */ .bo-row .bo-tx{min-width:0;display:flex;flex-direction:column} .bo-row .bo-tx .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bo-row .bo-bar{width:34px;flex:none;margin:0} .bo-row .end{gap:8px} select{background:var(--elev);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:6px 10px;font-family:inherit;font-size:12.5px} .placeholder-note{font-size:10.5px;color:var(--muted2);font-style:italic} .season-sel{margin-left:10px;padding:3px 8px;font-size:12px;font-weight:600;border-radius:7px;cursor:pointer;vertical-align:middle} .pinned-banner{margin-top:16px;padding:9px 14px;border-radius:9px;font-size:12.5px; background:rgba(125,92,245,.10);border:1px solid rgba(125,92,245,.30);color:#cdd4e6} .pinned-banner b{color:#b9a6f7} /* players directory */ .subtabs{display:flex;gap:2px;flex-wrap:wrap;margin:2px 0 22px;border-bottom:1px solid var(--border)} .subtabs a{padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--muted); border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s} .subtabs a:hover{color:var(--text)} .subtabs a.active{color:var(--text);border-bottom-color:var(--accent)} .page-head{display:flex;align-items:center;justify-content:space-between;margin:6px 0 18px} .page-head h2{font-size:24px;font-weight:800} .page-head p{color:var(--muted);font-size:13px;margin-top:3px} /* directory scope toggle: Top 5 Leagues vs Champions League */ .dir-scope{display:inline-flex;gap:3px;background:var(--card2);border:1px solid var(--border); border-radius:11px;padding:4px;margin-bottom:16px} .dir-scope .ds-btn{background:none;border:none;color:var(--muted);font-family:inherit;font-weight:700; font-size:13px;padding:8px 18px;border-radius:8px;cursor:pointer} .dir-scope .ds-btn:hover{color:var(--text)} .dir-scope .ds-btn.active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff} .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px} .filters .pill{background:var(--elev);border:1px solid var(--border2);border-radius:20px;padding:8px 16px; font-size:13px;font-weight:600;color:var(--text);cursor:pointer} .filters .pill.active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;border-color:transparent} .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px} .pcard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;cursor:pointer; transition:transform .12s,border-color .12s;position:relative;overflow:hidden} .pcard:hover{transform:translateY(-3px);border-color:var(--accent)} .pcard .top{display:flex;justify-content:space-between;align-items:flex-start} .pcard .photo{width:54px;height:54px;border-radius:50%;background:var(--card2); border:1px solid var(--pic-border);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted)} .pcard .rt{width:42px;height:42px;border-radius:50%;border:2px solid var(--accent);display:flex; align-items:center;justify-content:center;font-weight:800;font-size:15px} .pcard .nm{font-weight:700;font-size:16px;margin-top:14px} .pcard .sub{color:var(--muted);font-size:12.5px;margin-top:2px} .pcard .cls{display:inline-block;margin-top:10px;font-size:11px;font-weight:700;color:var(--accent2); background:var(--accent-soft);border-radius:20px;padding:3px 10px} .pcard .row{display:flex;gap:18px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)} .pcard .row.r4{gap:0;justify-content:space-between} .pcard .row.r4 .x{text-align:center} .pcard .rsplit{margin-top:8px;font-size:12px;color:var(--muted)} .pcard .rsplit b{color:var(--text);font-weight:700} .pcard .rsplit .cmb{color:var(--accent2);font-weight:700} .pcard .row .x span{color:var(--muted);font-size:11px;display:block} .pcard .row .x b{font-size:15px;font-weight:700} .empty{color:var(--muted);padding:40px;text-align:center;grid-column:1/-1} /* ---- Compare (use case 5) ---- */ .cmp-chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px} .cmp-chip{display:inline-flex;align-items:center;gap:8px;background:var(--card); border:1px solid var(--border2);border-radius:22px;padding:7px 12px;font-weight:600;font-size:13px} .cmp-chip .dot{width:9px;height:9px;border-radius:50%} .cmp-chip button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:0 2px} .cmp-chip button:hover{color:var(--red)} .cmp-hint{color:var(--muted2);font-size:12.5px} .cmp-board{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:start} @media(max-width:1000px){.cmp-board{grid-template-columns:1fr}} .cmp-select{background:var(--card2);border:1px solid var(--border2);color:var(--text); border-radius:10px;padding:6px;font-family:inherit;font-size:12.5px;min-width:150px;max-height:120px} .cmp-table{margin-top:6px} .cmp-group{border-top:1px solid var(--border);margin-top:8px;padding-top:4px} .cmp-group:first-child{border-top:none;margin-top:0} .cmp-row{display:grid;grid-template-columns:1.1fr repeat(3,1fr);align-items:center; padding:9px 4px;border-bottom:1px solid var(--border)} .cmp-row:last-child{border-bottom:none} .cmp-head{border-bottom:1px solid var(--border2);padding-bottom:12px} .cmp-stat{color:var(--muted);font-size:13px;font-weight:500} .cmp-cell{text-align:center;font-weight:700;font-size:15px} .cmp-cell.best{color:var(--green)} .cmp-cell .lead{font-size:10px} .cmp-pname{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13.5px} .cmp-pname .dot{width:9px;height:9px;border-radius:50%} .cmp-sub{color:var(--muted);font-size:11px;font-weight:500;margin-top:3px} .cmp-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:12px} .cmp-legend .lg{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);font-weight:600} .cmp-legend .dot{width:10px;height:10px;border-radius:50%} .cmp-grouplabel{font-size:11px;letter-spacing:1px;color:var(--muted2);font-weight:600; text-transform:uppercase;padding:8px 4px 2px} .cmp-stat .rm{background:none;border:none;color:var(--muted2);cursor:pointer;font-size:11px;padding:0 2px;margin-left:4px} .cmp-stat .rm:hover{color:var(--red)} /* ---- player photos + team crests ---- */ .prow .pic,.pcard .photo,.ph .photo,.cmp-photo,.spot .s .pic,.ll-ph{position:relative;overflow:hidden} .prow .pic>img,.pcard .photo>img,.ph .photo>img,.cmp-photo>img,.spot .s .pic>img,.ll-ph>img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:var(--card2)} .prow .pic .ini,.pcard .photo .ini,.ph .photo .ini,.cmp-photo .ini,.spot .s .pic .ini,.ll-ph .ini{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-weight:700;color:var(--muted)} .ph .photo .ini{font-size:30px} .pcard .photo .ini{font-size:15px} .crest-sm{width:15px;height:15px;object-fit:contain;vertical-align:-3px;margin-right:6px} .cmp-photo{width:54px;height:54px;border-radius:50%;display:inline-flex;margin-bottom:8px; background:var(--card2)} /* ---- total-stats block + scope toggle ---- */ .totals{margin-top:18px;border-top:1px solid var(--border);padding-top:14px} .scopetog{display:inline-flex;gap:2px;background:var(--elev);border:1px solid var(--border2); border-radius:9px;padding:3px} .scopetog .sct{background:none;border:none;color:var(--muted);font:inherit;font-size:12px;font-weight:600; cursor:pointer;padding:5px 11px;border-radius:6px} .scopetog .sct:hover:not(.active):not([disabled]){color:var(--text)} .scopetog .sct.active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff} .scopetog .sct[disabled]{opacity:.35;cursor:not-allowed} .tiles.compact{grid-template-columns:repeat(5,1fr);gap:8px} .tiles.compact .tile{padding:10px 8px} .tiles.compact .tile b{font-size:17px} .tiles.compact .tile .ic{font-size:14px} /* ---- crests (sizes) ---- */ .crest-md{width:22px;height:22px;object-fit:contain;vertical-align:middle} .crest-xl{width:84px;height:84px;object-fit:contain} /* ---- Teams: league table (use case 6) ---- */ .ltbl-wrap{overflow-x:auto} .ltbl td,.ltbl th{padding:9px 8px;white-space:nowrap;text-align:center} .ltbl th:nth-child(2),.ltbl td.tcell{text-align:left} .ltbl-row{cursor:pointer} .ltbl-row:hover{background:var(--card2)} .ltbl .pos{width:34px;color:var(--muted);font-weight:700;position:relative} .ltbl-row.ucl .pos{box-shadow:inset 3px 0 0 var(--accent)} .ltbl-row.rel .pos{box-shadow:inset 3px 0 0 var(--red)} .ltbl .tcell{display:flex;align-items:center;gap:10px;min-width:180px;font-weight:600} .ltbl .crest-w{width:22px;display:inline-flex;justify-content:center} .pos-n{color:var(--green)} .neg-n{color:var(--red)} .formcell{white-space:nowrap} /* ---- Team performance page ---- */ .thead{display:flex;align-items:center;gap:22px;margin-bottom:20px} .tcrest{width:88px;height:88px;flex:none;display:flex;align-items:center;justify-content:center; background:var(--card2);border:1px solid var(--border2);border-radius:16px;font-size:40px} .tmeta h1{font-size:30px;font-weight:800} .tmeta .tsub{color:var(--muted);margin:5px 0 12px;font-size:14px} .tmeta .trank{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .pill-rank{background:var(--accent-soft);color:var(--text);border-radius:20px;padding:5px 14px;font-weight:700;font-size:13px} .tform{display:inline-flex;gap:3px} #perfTiles{grid-template-columns:repeat(9,1fr)} .res-row{display:grid;grid-template-columns:30px 26px 1fr auto auto;align-items:center;gap:12px; padding:10px 6px;border-bottom:1px solid var(--border)} .res-row:last-child{border-bottom:none} .res-badge{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center; font-weight:800;font-size:12px;color:#fff} .res-W .res-badge{background:var(--green)} .res-D .res-badge{background:#6b7280} .res-L .res-badge{background:var(--red)} .res-ven{color:var(--muted2);font-weight:700;font-size:12px} .res-opp{display:flex;align-items:center;gap:8px;font-weight:600} .res-sc b{font-size:15px} .res-xg{font-size:12px} .ord{color:var(--muted2);font-size:13px;font-weight:600} @media(max-width:760px){.res-xg{display:none}} /* ---- Team info (manager/venue) + squad (use case 7) ---- */ .tinfo{display:flex;gap:28px;flex-wrap:wrap;margin-top:14px} .tinfo .ti{display:flex;flex-direction:column;gap:2px} .tinfo .ti .k{color:var(--muted);font-size:11px;letter-spacing:.4px} .tinfo .ti b{font-size:14px;font-weight:700} .sgroup{margin-bottom:18px} .sgroup:last-child{margin-bottom:0} .sglabel{font-size:11px;letter-spacing:1.2px;color:var(--muted2);font-weight:700;text-transform:uppercase; margin:6px 2px 10px} .sglabel span{color:var(--accent2);margin-left:4px} .sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} @media(max-width:1100px){.sgrid{grid-template-columns:repeat(3,1fr)}} @media(max-width:760px){.sgrid{grid-template-columns:repeat(2,1fr)}} .scard{display:flex;align-items:center;gap:11px;background:var(--card2);border:1px solid var(--border); border-radius:12px;padding:10px;cursor:pointer} .scard:hover{border-color:var(--accent);transform:translateY(-2px);transition:.15s} .scard .pic{width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;position:relative;background:var(--card2)} .scard .sx{flex:1;min-width:0} .scard .sx .nm{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .scard .sx .sub{color:var(--muted);font-size:11.5px;margin-top:2px} .scard .sga{font-size:12px;color:var(--muted);white-space:nowrap} .scard .sga b{color:var(--text);font-size:13px} .scard .pic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:var(--card2)} .scard .pic .ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);font-size:12px} /* ---- Search (use case 8) ---- */ .sr{display:flex;align-items:center;gap:12px;padding:9px 6px;border-radius:9px;cursor:pointer} .sr:hover{background:var(--card2)} .sr .pic{width:38px;height:38px;border-radius:50%;flex:none;overflow:hidden;position:relative;background:var(--card2)} .sr .pic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:var(--card2)} .sr .pic .ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);font-size:12px} .sr .pic.crest-pic{background:var(--card2);border:1px solid var(--pic-border);display:flex;align-items:center;justify-content:center;font-size:16px} .sr .srx{flex:1;min-width:0} .sr .srx .nm{font-weight:700;font-size:14px} .sr .srx .sub{color:var(--muted);font-size:12px;margin-top:2px} .sr .srend{color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap} .h2h-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px} .h2h-form input{background:var(--card2);border:1px solid var(--border2);color:var(--text);border-radius:10px; padding:11px 14px;font-family:inherit;font-size:14px;flex:1;min-width:180px;outline:none} .h2h-form .vs{color:var(--muted);font-weight:700} .h2h-head{display:flex;align-items:center;justify-content:center;gap:20px;margin:16px 0;font-weight:800;font-size:17px} .h2h-head .h2h-team{display:flex;align-items:center;gap:9px} .h2h-head .vs{color:var(--muted);font-weight:600;font-size:14px} .mrow{display:grid;grid-template-columns:96px 1fr auto 1fr auto;align-items:center;gap:12px; padding:11px 6px;border-top:1px solid var(--border)} .mdate{color:var(--muted);font-size:12px} .mteam{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px} .mteam.home{justify-content:flex-end;text-align:right} .mteam.away{justify-content:flex-start} .mscore b{font-size:16px} .mxg{font-size:12px;text-align:right;white-space:nowrap} @media(max-width:760px){.mxg{display:none}.mrow{grid-template-columns:72px 1fr auto 1fr}} /* ---- global search dropdown ---- */ .search.has-dd{position:relative} .search-dd{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;display:none; background:var(--card);border:1px solid var(--border2);border-radius:12px;padding:6px; box-shadow:0 18px 50px rgba(0,0,0,.5);max-height:70vh;overflow-y:auto} .search-dd.open{display:block} .search-dd .dd-h{font-size:11px;letter-spacing:1px;color:var(--muted2);font-weight:700; text-transform:uppercase;padding:8px 10px 4px} .search-dd .dd-row{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;color:var(--text)} .search-dd .dd-row:hover{background:#141a2b} .search-dd .dd-row .pic{width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;position:relative;background:var(--card2)} .search-dd .dd-row .pic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:var(--card2)} .search-dd .dd-row .pic .ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);font-size:11px} .search-dd .dd-row .pic .crest-pic{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--card2);font-size:15px} .search-dd .ddx{min-width:0} .search-dd .ddx .nm{font-weight:700;font-size:13.5px} .search-dd .ddx .sub{color:var(--muted);font-size:12px;margin-top:1px} .search-dd .dd-all{display:block;padding:10px;text-align:center;color:var(--accent);font-weight:600;font-size:13px; border-top:1px solid var(--border);margin-top:4px} .search-dd .dd-all:hover{background:#141a2b;border-radius:9px} .search-dd .dd-empty{padding:16px;text-align:center;color:var(--muted)} /* ---- Archetypes (use case 10) ---- */ /* profile archetype card */ .arch-head .arch-name{font-size:20px;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .arch-fit{font-size:12px;font-weight:700;color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:20px;padding:3px 11px} .arch-grp{color:var(--muted);font-size:12.5px;margin-top:4px} .arch-blurb{color:var(--muted);font-size:13px;line-height:1.5;margin:12px 0} .arch-traits,.ad-sig{display:flex;flex-wrap:wrap;gap:7px} .trait{display:inline-flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--border2); border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600;color:var(--text);text-transform:capitalize} .trait b{color:var(--accent2);font-size:12px} .simpct{color:var(--muted);font-size:12px;font-weight:600} .ratingchip.sm{width:30px;height:30px;font-size:12px} /* explorer */ .arch-explorer{display:grid;grid-template-columns:240px 1fr;gap:18px;align-items:start} @media(max-width:900px){.arch-explorer{grid-template-columns:1fr}} .arch-nav{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:8px; position:sticky;top:78px;max-height:calc(100vh - 96px);overflow-y:auto} .arch-nav-grp{margin-bottom:6px} .arch-nav .role{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none; color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:9px 11px;border-radius:9px;text-align:left} .arch-nav .role:hover{background:#141a2b;color:var(--text)} .arch-nav .role.active{background:linear-gradient(90deg,var(--accent-soft),transparent);color:var(--text);box-shadow:inset 3px 0 0 var(--accent)} .arch-nav .role .rc{color:var(--muted2);font-size:12px;font-weight:700} .ad-grp{font-size:12px;letter-spacing:1px;color:var(--accent2);font-weight:700;text-transform:uppercase} .ad-name{font-size:26px;font-weight:800;margin:4px 0 8px} .ad-blurb{color:var(--muted);font-size:14px;line-height:1.5;max-width:640px} .ad-sig{margin:16px 0 6px;align-items:center} .ad-sig-l{font-size:11px;letter-spacing:1px;color:var(--muted2);font-weight:700;text-transform:uppercase;margin-right:4px} .ad-grid-h{font-size:12px;letter-spacing:1px;color:var(--muted);font-weight:700;text-transform:uppercase;margin:20px 0 12px} .fitbar{height:5px;background:var(--card2);border-radius:4px;overflow:hidden;margin-top:10px} .fitbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))} /* signature actions (use case 9) */ .tech .t .tn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tech .t b{font-weight:700;white-space:nowrap;min-width:52px;text-align:right} .tech .per90{color:var(--muted);font-weight:500;font-size:11px} /* Team of the Season pitch chips (real data) */ .pitch .pline{margin:10px 0} .pp{cursor:pointer} .pp .dot{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center} .pp .dot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:var(--card2)} .pp .dot .ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:var(--muted)} .pp .pp-rt{font-weight:800;font-size:10px;color:#06210f;border-radius:6px;padding:1px 5px;line-height:1.4} .pp .pp-n{font-weight:600;font-size:11px;color:var(--text);max-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pp:hover .pp-n{color:var(--accent2)} /* licensed photo credit under the profile header image */ .ph-img{display:flex;flex-direction:column;align-items:center;gap:5px} .photo-credit{font-size:10px;line-height:1.2;text-align:center;max-width:76px} .photo-credit a{color:var(--muted2)} .photo-credit a:hover{color:var(--muted)} .photo-credit:empty{display:none} /* season heatmap canvas */ #heat{width:100%;height:auto;border-radius:10px;display:block;background:#0e1f17;border:1px solid var(--border)} /* ---- Scout / Player Finder (use case 1) ---- */ .scout-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px 24px;align-items:end} .flt{display:flex;flex-direction:column;gap:7px} .flt label{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:700} .flt .val{color:var(--accent2);font-weight:700} .flt input[type=range]{width:100%;accent-color:var(--accent);height:4px} .scout-meta{display:flex;justify-content:space-between;align-items:center;margin:18px 0 12px} .scout-meta .cnt{color:var(--muted);font-size:13px} .scout-meta .cnt b{color:var(--text)} .stbl{width:100%;border-collapse:collapse} .stbl thead th{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted); font-weight:700;text-align:right;padding:0 14px 12px;border-bottom:1px solid var(--border)} .stbl thead th:first-child,.stbl thead th.l{text-align:left} .stbl thead th.m{color:var(--accent2)} .stbl tbody td{padding:11px 14px;border-bottom:1px solid var(--border);text-align:right;font-variant-numeric:tabular-nums} .stbl tbody tr{cursor:pointer} .stbl tbody tr:hover{background:var(--card2)} .stbl td.l{text-align:left} .stbl .pcell{display:flex;align-items:center;gap:11px} .stbl .pcell .pic{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:0 0 34px;position:relative;background:var(--card2)} .stbl .pcell .pic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:var(--card2)} .stbl .pcell .pic .ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);font-size:12px} .stbl .pcell .nm{font-weight:700} .stbl .pcell .sub{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:5px} .stbl .rk{color:var(--muted2);font-weight:700;width:26px} .stbl .mcol{color:var(--accent2);font-weight:800} .stbl .rtg{font-weight:800} /* ---- Team Styles (use case 3) ---- */ .style-board{display:grid;grid-template-columns:1.1fr .9fr;gap:18px} @media(max-width:920px){.style-board{grid-template-columns:1fr}} .style-pickers{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:6px} .style-pickers .tp{display:flex;align-items:center;gap:9px;background:var(--card2);border:1px solid var(--border2); border-radius:12px;padding:8px 12px} .style-pickers .tp .dot{width:10px;height:10px;border-radius:50%} .style-pickers select{background:transparent;border:none;color:var(--text);font-weight:700;font-size:14px;outline:none;cursor:pointer} .axis-tbl{width:100%;border-collapse:collapse;margin-top:4px} .axis-tbl td{padding:10px 6px;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums} .axis-tbl td:first-child{color:var(--muted);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px} .axis-tbl .bar{height:7px;border-radius:5px;background:var(--border);position:relative;min-width:90px} .axis-tbl .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px} .axis-tbl .sc{font-weight:800;text-align:right;width:42px} .axis-tbl .rw{color:var(--muted);text-align:right;width:64px;font-size:12.5px} /* ---------- Match detail page ---------- */ .match-hero{padding:18px 22px} .mh-comp{color:var(--muted);font-size:12.5px;font-weight:600;text-align:center;margin-bottom:10px} .mh-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px} .mh-team{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700} .mh-team.away{justify-content:flex-end} .mh-team .nflag{font-size:30px} .mh-team .crest{width:34px;height:34px} .mh-score{font-size:34px;font-weight:800;text-align:center;letter-spacing:2px;white-space:nowrap} .mh-score .dash{margin:0 8px;color:var(--muted)} .mh-score .vs{font-size:18px;color:var(--muted);letter-spacing:0} /* match page "Predict the Score" tab */ .mpp{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:10px 0 2px} .mpp-team{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;min-width:0} .mpp-team.away{justify-content:flex-end} .mpp-team .nflag{font-size:26px}.mpp-team .crest{width:28px;height:28px} .mpp-score{display:flex;align-items:center;gap:8px} .mpp-in{width:54px;height:48px;text-align:center;font-size:22px;font-weight:800;background:var(--elev); border:1px solid var(--border2);border-radius:10px;color:var(--text);outline:none;font-family:inherit;-moz-appearance:textfield} .mpp-in::-webkit-outer-spin-button,.mpp-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .mpp-in:focus{border-color:var(--accent)}.mpp-in:disabled{opacity:.6;cursor:not-allowed} .mpp-in.set{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset} .mpp-score .dash{color:var(--muted);font-weight:800;font-size:20px} .mpp-state{text-align:center;color:var(--muted);font-size:13.5px;margin-top:16px} .mpp-state .saved{color:var(--green)}.mpp-state .lock{color:var(--muted2)} .mpp-pts{font-weight:800;margin-left:4px}.mpp-pts.pos{color:var(--green)}.mpp-pts.zero{color:var(--muted2)} .mpp-foot{text-align:center;color:var(--muted);font-size:12.5px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)} .mh-st{margin-top:4px} .mh-st .live{color:var(--red);font-size:12px;font-weight:700} .mh-st .tag{color:var(--muted);font-size:11px} .tabs.sm{margin-bottom:0;gap:12px} .tabs.sm .tab{font-size:12px;padding-bottom:6px} /* stat rows */ .stat-group{margin-bottom:14px} .stat-row{display:grid;grid-template-columns:54px 1fr 54px;grid-template-rows:auto auto;align-items:center;gap:6px 10px;padding:9px 4px} .stat-row + .stat-row{border-top:1px solid rgba(255,255,255,.045)} .stat-row .sv{font-weight:700;font-size:14.5px;color:var(--muted2)} /* trailing side dim by default */ .stat-row .sv.away{text-align:right} .stat-row .sv.lead{color:var(--text)} /* leader bright */ .stat-row .sl{text-align:center;color:var(--muted);font-size:12px;font-weight:500} .stat-row .sbar{grid-column:1/4;display:flex;gap:3px;height:7px;border-radius:4px;overflow:hidden;background:transparent} .stat-row .sbar i{display:block;border-radius:4px;min-width:2px} .stat-row .sbar i.h{background:linear-gradient(90deg,#5570f0,#7d5cf5)} .stat-row .sbar i.a{background:#e0556f;opacity:.85} /* lineups */ .lu-col .lu-row{display:grid;grid-template-columns:26px 1fr auto auto;align-items:center;gap:8px;padding:7px 2px;border-bottom:1px solid var(--border);font-size:13px} .lu-col .lu-row:last-child{border-bottom:none} .lu-no{color:var(--muted);font-weight:700;text-align:center;font-size:12px} .lu-nm{font-weight:600} .lu-pos{color:var(--muted);font-size:11px} .lu-sub-h{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:10px 0 2px} .ratingchip.sm{width:30px;height:22px;border-radius:5px;font-size:11.5px} /* ---- formation pitch (match lineups) ---- */ .lp-head{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px;font-size:13.5px;color:var(--muted)} .lp-head b{color:var(--text);font-weight:700} .lineup-pitch{position:relative;width:100%;max-width:540px;margin:0 auto;aspect-ratio:68/104;border-radius:12px; border:1px solid rgba(255,255,255,.18);overflow:hidden; background:repeating-linear-gradient(0deg,#16331f 0,#16331f 8.66%,#14301d 8.66%,#14301d 17.3%)} .lineup-pitch .lp-mid{position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(255,255,255,.22)} .lineup-pitch .lp-circle{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%); border:2px solid rgba(255,255,255,.22);border-radius:50%} .lineup-pitch .lp-spot{position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.3)} .lineup-pitch .lp-box{position:absolute;left:21%;width:58%;height:14%;border:2px solid rgba(255,255,255,.2)} .lineup-pitch .lp-box.top{top:-2px} .lineup-pitch .lp-box.bot{bottom:-2px} .lineup-pitch .lp-six{position:absolute;left:35%;width:30%;height:6%;border:2px solid rgba(255,255,255,.16)} .lineup-pitch .lp-six.top{top:-2px} .lineup-pitch .lp-six.bot{bottom:-2px} .luc{position:absolute;transform:translate(-50%,-50%);width:78px;text-align:center;cursor:pointer;z-index:2} .luc-dot{position:relative;display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin:0 auto; border-radius:50%;font-weight:700;font-size:17px;color:#fff;background:rgba(16,22,38,.94);border:2px solid #5570f0;transition:transform .1s} .luc.a .luc-dot{border-color:#e0556f} .luc:hover .luc-dot{transform:scale(1.12)} .luc-nm{display:block;margin-top:4px;font-size:13px;font-weight:600;color:#fff;text-shadow:0 1px 3px #000; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .luc-ev{display:block;margin-top:1px;font-size:12px;line-height:1;white-space:nowrap} .luc-ev .ev{margin:0 1px} .luc-ev .ev b{font-size:10px;font-weight:700;color:#fff;vertical-align:top;text-shadow:0 1px 2px #000} .luc-ev .ev.a{filter:grayscale(.2)} .luc-rt{position:absolute;right:-11px;bottom:-6px;font-size:12px;font-weight:700;color:#06140a;border-radius:5px;padding:1px 5px;font-style:normal} .luc-ar{position:absolute;left:-11px;bottom:-6px;font-size:12px;font-weight:800;color:#fff;font-style:normal; background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:5px;padding:1px 5px;box-shadow:0 1px 3px rgba(0,0,0,.5)} .luc-ar.est{background:none;border:1.5px solid var(--accent2);color:var(--accent2);box-shadow:none;padding:0 4px} .lu-ar{display:inline-block;margin-left:6px;font-size:11px;font-weight:800;color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:5px;padding:0 5px} .lu-ar.est{background:none;border:1px solid var(--accent2);color:var(--accent2)} .luc-cap{position:absolute;left:-8px;top:-6px;font-size:10px;font-weight:700;color:#06140a;background:#ffd24a;border-radius:50%;width:16px;height:16px;line-height:16px;font-style:normal} /* ---- match prediction (from bookmaker odds) ---- */ .pr-head{font-size:15px;margin:4px 0 12px} .pr-head b{font-weight:700} .pr-bar{display:flex;height:30px;border-radius:8px;overflow:hidden;gap:2px} .pr-seg{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;min-width:2px;transition:width .3s} .pr-seg.h{background:linear-gradient(90deg,#5570f0,#7d5cf5)} .pr-seg.d{background:#56607e} .pr-seg.a{background:#e0556f} .pr-seg.pred{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)} .pr-legend{display:flex;justify-content:space-between;gap:10px;margin-top:10px;font-size:12.5px;color:var(--muted);flex-wrap:wrap} .pr-legend b{color:var(--text)} .pr-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle} .pr-legend .h{background:#6a6ef0}.pr-legend .d{background:#56607e}.pr-legend .a{background:#e0556f} /* ---- player match-stats modal ---- */ .pm-overlay{position:fixed;inset:0;z-index:50;background:rgba(4,7,16,.66);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px} .pm-card{position:relative;width:100%;max-width:380px;background:var(--card);border:1px solid var(--border2);border-radius:16px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.5)} .pm-x{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer} .pm-x:hover{color:var(--text)} .pm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding-right:18px} .pm-nm{font-size:18px;font-weight:700} .pm-sub{color:var(--muted);font-size:12.5px;margin-top:2px} .pm-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} .pm-s{background:var(--card2);border:1px solid var(--border);border-radius:9px;padding:8px 6px;text-align:center} .pm-s span{display:block;color:var(--muted);font-size:10.5px;margin-bottom:3px} .pm-s b{font-size:15px;font-weight:700} .pm-heat{margin-top:14px} .pm-heat-h{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px} .pm-heat canvas{width:100%;height:auto;border-radius:8px;display:block} .pm-full{display:block;text-align:center;margin-top:14px} /* pitch + shot map */ .pitch-wrap{padding:8px 0} .pitch-svg{width:100%;height:auto;background:#0e1f17;border-radius:10px} .pitch-svg .pl{fill:none;stroke:rgba(255,255,255,.18);stroke-width:.4} .pitch-svg .shot{stroke:#0e1f17;stroke-width:.3;opacity:.9;cursor:pointer} .pitch-svg .shot.goal{fill:#34c46a} .pitch-svg .shot.ontarget{fill:#e8b04b} .pitch-svg .shot.offtarget{fill:#7f8aa3;opacity:.6} .legend{display:flex;gap:16px;align-items:center;margin-top:10px;font-size:12px;color:var(--muted);flex-wrap:wrap} .legend i.lg{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle} .legend i.lg.goal{background:#34c46a}.legend i.lg.ontarget{background:#e8b04b}.legend i.lg.offtarget{background:#7f8aa3} /* timeline */ .tl{padding:4px 0} .tl-row{display:grid;grid-template-columns:46px 26px 1fr;align-items:center;gap:8px;padding:8px 2px;border-bottom:1px solid var(--border);font-size:13px} .tl-row.away{background:rgba(255,255,255,.015)} .tl-min{color:var(--muted);font-weight:700;text-align:right;font-size:12px} .tl-ic{text-align:center} .tl-period{text-align:center;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:8px 0;border-top:1px dashed var(--border)} /* player stats table */ .pl-tbl th{cursor:pointer;white-space:nowrap} .pl-tbl th.sorted{color:var(--text)} .pl-tbl th.tl,.pl-tbl td.tl{text-align:left} .pl-tbl td{text-align:center;white-space:nowrap} .pl-tbl .pl-no{color:var(--muted);font-weight:700;display:inline-block;width:20px} .pl-tbl tr.sub-row td{opacity:.62} /* heatmaps */ .hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:10px} .hm-cell canvas{width:100%;height:auto;border-radius:8px;display:block} .hm-nm{font-size:11.5px;font-weight:600;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .former-tag{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;color:#ffce6a;background:rgba(255,206,106,.12);border:1px solid rgba(255,206,106,.3);border-radius:5px;padding:1px 6px;vertical-align:middle} .rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px} @media(max-width:920px){.rank-grid{grid-template-columns:1fr}} .nt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px} .nt-card{display:flex;align-items:center;gap:12px;background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:11px 13px} .nt-card:hover{border-color:var(--accent)} .nt-flag{font-size:26px;line-height:1;flex:none} .nt-x{flex:1;min-width:0} .nt-card .nt-nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nt-card .nt-sub{color:var(--muted);font-size:11.5px;margin-top:1px} .nt-form{display:flex;gap:3px;flex:none} /* national team page */ .nat-ev{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:9px 4px;border-bottom:1px solid var(--border);font-size:13.5px} .nat-ev:last-child{border-bottom:none} .nat-ev .ne-home{text-align:right;font-weight:600} .nat-ev .ne-away{font-weight:600} .nat-ev .ne-sc{font-weight:800;min-width:54px;text-align:center} .nat-ev .ne-sc .vs{font-weight:600;color:var(--muted);font-size:12px} .nat-ev .ne-sc .dash{color:var(--muted);margin:0 3px} .nat-ev .ne-comp{grid-column:1/4;color:var(--muted);font-size:11px;text-align:center;margin-top:-2px} .sq-group{margin-bottom:14px} .sq-group h5{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px} .sq-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px} .sq-p{display:flex;align-items:center;gap:10px;background:var(--card2);border:1px solid var(--border);border-radius:9px;padding:8px 11px;cursor:pointer} .sq-p:hover{border-color:var(--accent)} .sq-p .sq-no{color:var(--muted);font-weight:700;font-size:12px;width:20px;text-align:center;flex:none} .sq-p .sq-nm{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lineup-pitch.nat-pitch{aspect-ratio:68/92;max-width:560px} .pm-club{margin-top:4px;font-size:12.5px;color:var(--muted)} .pm-club a{color:var(--accent);font-weight:600;cursor:pointer} /* ---- Scout Report (AI-generated) ---- */ .sr-card{padding:0;overflow:hidden} .sr-paper{font-family:'Source Serif 4',Georgia,serif;color:#e9edf6;line-height:1.62; padding:34px 40px;max-width:860px;margin:0 auto;font-size:16px} .sr-paper h1{font-size:27px;font-weight:600;letter-spacing:-.2px;margin:0 0 2px;line-height:1.2} .sr-paper h1 + p,.sr-paper h1 + p em{color:var(--muted);font-size:14px;font-style:italic;margin:0 0 18px} .sr-paper h2{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:1.4px; text-transform:uppercase;color:var(--accent2);margin:26px 0 10px;padding-bottom:6px; border-bottom:1px solid var(--border2)} .sr-paper h3{font-size:18px;font-weight:600;margin:18px 0 6px} .sr-paper p{margin:0 0 12px} .sr-paper ul{margin:4px 0 14px;padding-left:22px} .sr-paper li{margin:5px 0} .sr-paper strong{color:#fff;font-weight:600} .sr-paper hr{border:none;border-top:1px solid var(--border);margin:20px 0} .sr-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap; padding:12px 40px;border-top:1px solid var(--border);background:var(--card2); font-size:12px;color:var(--muted)} .sr-meta a{color:var(--accent);font-weight:600} .sr-empty{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center; padding:60px 30px;color:var(--muted)} .sr-empty-ic{font-size:40px} .sr-empty p{max-width:460px;font-size:14px;line-height:1.5} .sr-empty b{color:var(--text)} .sr-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--border2); border-top-color:var(--accent);animation:sr-spin .8s linear infinite} @keyframes sr-spin{to{transform:rotate(360deg)}} /* ===== Best XI on a Budget (use case 4) ===== */ .bxi-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:26px} .bxi-controls label{display:block;font-size:11px;font-weight:700;letter-spacing:.6px; text-transform:uppercase;color:var(--muted);margin-bottom:9px} .bxi-budget{flex:1;min-width:300px} .bxi-brow{display:flex;align-items:center;gap:16px} .bxi-brow input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px; background:var(--border2);outline:none;cursor:pointer} .bxi-brow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%; background:var(--accent);border:2px solid rgba(255,255,255,.85);box-shadow:0 2px 7px rgba(0,0,0,.5);cursor:pointer} .bxi-brow input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid #fff;border-radius:50%; background:var(--accent);cursor:pointer} .bxi-bval{font-size:18px;font-weight:700;white-space:nowrap;color:var(--muted)} .bxi-bval input{width:78px;background:var(--card2);border:1px solid var(--border2);color:var(--text); border-radius:8px;padding:7px 8px;font-size:17px;font-weight:800;text-align:right;margin:0 2px} .bxi-presets{display:flex;gap:7px;margin-top:11px} .bxi-preset{background:var(--card2);border:1px solid var(--border2);color:var(--muted); border-radius:7px;padding:5px 11px;font-size:12px;font-weight:700;cursor:pointer;transition:.1s} .bxi-preset:hover{border-color:var(--accent);color:var(--text)} .bxi-forms{display:flex;gap:10px} .bxi-fbtn{display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--card2); border:1px solid var(--border2);color:var(--muted);border-radius:12px;padding:10px 13px 9px; cursor:pointer;font-weight:800;font-size:12.5px;min-width:62px;transition:.12s} .bxi-fbtn:hover{border-color:var(--accent2)} .bxi-fbtn.active{background:linear-gradient(180deg,rgba(85,112,240,.28),var(--card2)); border-color:var(--accent);color:var(--text)} .bxi-pic{display:flex;flex-direction:column;gap:3px} .bxi-pic-r{display:flex;justify-content:center;gap:3px} .bxi-pic-r i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.8} /* summary hero */ .bxi-summary{display:flex;flex-wrap:wrap;align-items:center;gap:30px;margin-top:18px; background-image:linear-gradient(120deg,rgba(85,112,240,.13),rgba(125,92,245,.04) 60%)} .bxi-gauge{--deg:0deg;--rc:#2fbf71;width:94px;height:94px;border-radius:50%;flex:none; background:conic-gradient(var(--rc) var(--deg),var(--border2) 0);display:flex;align-items:center; justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3)} .bxi-gauge-in{width:74px;height:74px;border-radius:50%;background:var(--card);display:flex; flex-direction:column;align-items:center;justify-content:center} .bxi-gauge-in b{font-size:27px;font-weight:800;line-height:1} .bxi-gauge-in span{font-size:9px;letter-spacing:1.5px;color:var(--muted);font-weight:700;margin-top:2px} .bxi-sumstats{display:flex;gap:34px;flex-wrap:wrap} .bxi-stat{display:flex;flex-direction:column;gap:3px} .bxi-stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px} .bxi-stat b{font-size:21px;font-weight:800} .bxi-spendwrap{flex:1 1 240px;min-width:220px} .bxi-spend-top{display:flex;justify-content:space-between;font-size:11.5px;font-weight:600; color:var(--muted);margin-bottom:7px} .bxi-spend-top b{color:var(--text);font-weight:800} .bxi-spend{height:9px;border-radius:6px;background:var(--border2);overflow:hidden} .bxi-spend-bar{height:100%;border-radius:6px;background:linear-gradient(90deg,#2fbf71,#7ee0a6); box-shadow:0 0 10px rgba(47,191,113,.5)} /* the pitch */ .bxi-pitchcard{margin-top:18px;padding:10px} .bxi-pitch{position:relative;border-radius:18px;overflow:hidden;border:2px solid #1a5e36; background:linear-gradient(180deg,#2f9b58,#218047), repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 9.09%,rgba(0,0,0,.03) 9.09% 18.18%); box-shadow:inset 0 0 90px rgba(0,0,0,.4),inset 0 0 0 2px rgba(255,255,255,.05)} .bxi-markings{position:absolute;inset:0;pointer-events:none;color:rgba(255,255,255,.28)} .bxi-markings span{position:absolute;border-color:currentColor} .m-half{top:50%;left:16px;right:16px;height:0;border-top:2px solid currentColor} .m-circle{top:50%;left:50%;width:98px;height:98px;margin:-49px 0 0 -49px;border:2px solid currentColor;border-radius:50%} .m-spot{top:50%;left:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:currentColor} .m-box{left:50%;width:44%;height:62px;transform:translateX(-50%);border:2px solid currentColor} .m-box-t{top:-2px;border-top:none;border-radius:0 0 5px 5px} .m-box-b{bottom:-2px;border-bottom:none;border-radius:5px 5px 0 0} .m-six{left:50%;width:22%;height:28px;transform:translateX(-50%);border:2px solid currentColor} .m-six-t{top:-2px;border-top:none;border-radius:0 0 4px 4px} .m-six-b{bottom:-2px;border-bottom:none;border-radius:4px 4px 0 0} .m-pspot{left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:currentColor} .m-pspot-t{top:44px} .m-pspot-b{bottom:44px} .bxi-rows{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between; min-height:540px;padding:30px 14px;gap:8px} .bxi-row{display:flex;justify-content:center;gap:clamp(8px,2.2vw,30px);flex-wrap:wrap} .bxi-tok{position:relative;width:106px;color:var(--text);text-decoration:none;display:flex; flex-direction:column;align-items:center;gap:6px;padding:12px 8px 11px;border-radius:14px; background:linear-gradient(180deg,rgba(16,23,36,.93),rgba(9,14,23,.95)); border:1px solid rgba(255,255,255,.14);box-shadow:0 7px 18px rgba(0,0,0,.4); transition:transform .13s,box-shadow .13s,border-color .13s} .bxi-tok:hover{transform:translateY(-5px);border-color:var(--rc);box-shadow:0 14px 30px rgba(0,0,0,.55)} .bxi-avwrap{position:relative} .bxi-av{width:54px;height:54px;border-radius:50%;background:#1b2436 center/cover no-repeat; box-shadow:0 0 0 2px var(--rc),0 0 0 4px rgba(255,255,255,.07)} .bxi-av-ini{display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800; color:#cdd6e8;background:linear-gradient(180deg,#28324a,#1a2233)} .bxi-rat{position:absolute;right:-7px;bottom:-4px;min-width:23px;height:22px;padding:0 5px;border-radius:7px; background:var(--rc);color:#08160d;font-weight:800;font-size:12.5px;display:flex;align-items:center; justify-content:center;border:1.5px solid rgba(0,0,0,.3);box-shadow:0 2px 6px rgba(0,0,0,.45)} .bxi-name{font-size:12.5px;font-weight:700;line-height:1.15;text-align:center} .bxi-meta{display:flex;align-items:center;gap:6px} .bxi-pos{font-size:10px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.08); padding:2px 6px;border-radius:5px} .bxi-val{font-size:11.5px;font-weight:800;color:#7ee0a6} /* ===== Find the Next… (use case 8) ===== */ .fn-legends{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px} .fn-leg{text-align:left;background:var(--card2);border:1px solid var(--border2);border-radius:11px; padding:11px 13px;cursor:pointer;color:var(--text);display:flex;flex-direction:column;gap:2px;transition:.1s} .fn-leg:hover{border-color:var(--accent)} .fn-leg.active{border-color:var(--accent);background:linear-gradient(180deg,rgba(125,92,245,.18),var(--card2))} .fn-leg b{font-size:14px} .fn-leg span{font-size:11.5px;color:var(--accent2);font-weight:600} .fn-leg small{font-size:11px;color:var(--muted)} .fn-hero{display:flex;gap:26px;align-items:center;margin-top:18px;flex-wrap:wrap} .fn-hero-l{flex:1;min-width:260px} .fn-hero-kick{font-size:13px;font-weight:700;letter-spacing:.5px;color:var(--accent2);text-transform:uppercase} .fn-hero-name{font-size:34px;font-weight:800;letter-spacing:-.5px;line-height:1.1;margin:2px 0 6px} .fn-hero-meta{font-size:14px;color:var(--muted);font-weight:600} .fn-hero-blurb{font-size:13.5px;color:var(--muted);line-height:1.55;margin:14px 0 0;max-width:520px} .fn-hero-r{width:300px;max-width:100%} .fn-matches{display:flex;flex-direction:column;gap:8px} .fn-match{display:flex;align-items:center;gap:14px;background:var(--card2);border:1px solid var(--border2); border-radius:11px;padding:9px 14px;color:var(--text);transition:.1s} .fn-match:hover{border-color:var(--accent);transform:translateX(2px)} .fn-match.top{border-color:rgba(47,191,113,.5);background:linear-gradient(90deg,rgba(47,191,113,.1),var(--card2))} .fn-rank{width:22px;text-align:center;font-weight:800;color:var(--muted)} .fn-mphoto{width:40px;height:40px;border-radius:50%;background:#27314a center/cover no-repeat;flex:none; border:1px solid var(--border2)} .fn-minfo{flex:1;min-width:0} .fn-minfo b{font-size:14px;display:block} .fn-minfo span{font-size:12px;color:var(--muted)} .fn-mrat{font-size:15px;font-weight:800;width:34px;text-align:center} .fn-mval{font-size:12.5px;font-weight:700;color:#9fe6bd;width:64px;text-align:right} .fn-ring{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none} .fn-ring span{width:36px;height:36px;border-radius:50%;background:var(--card);display:flex;align-items:center; justify-content:center;font-size:13px;font-weight:800} .fn-ring small{font-size:8px;font-weight:700;margin-left:1px} /* ===== Player Card (use case 24) ===== */ .card-host{padding:26px} .card-stage{display:flex;gap:36px;flex-wrap:wrap;align-items:flex-start} .card-canvas-wrap{flex:none} #card{width:340px;height:486px;display:block;border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.55)} .card-side{flex:1;min-width:260px;padding-top:4px} .cs-label{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase; color:var(--muted);margin-bottom:9px} .card-search{position:relative;margin-bottom:18px;max-width:360px} .card-search input{width:100%;background:var(--card2);border:1px solid var(--border2);color:var(--text); border-radius:10px;padding:11px 14px;font-size:14px;outline:none} .card-search input:focus{border-color:var(--accent)} .card-dd{display:none;position:absolute;top:48px;left:0;right:0;background:var(--card); border:1px solid var(--border2);border-radius:10px;overflow:hidden;z-index:20;box-shadow:0 12px 30px rgba(0,0,0,.5)} .card-dd-it{padding:9px 13px;cursor:pointer;display:flex;flex-direction:column;gap:1px} .card-dd-it:hover{background:var(--card2)} .card-dd-it b{font-size:13.5px} .card-dd-it span{font-size:11.5px;color:var(--muted)} .card-actions{display:flex;gap:10px;flex-wrap:wrap;max-width:360px} .card-profile-link{display:inline-block;margin-top:14px;color:var(--accent);font-weight:600;font-size:13px} .cs-hint{font-size:12px;color:var(--muted);line-height:1.55;margin-top:16px;max-width:360px} /* ===== Football DNA Map ===== */ .dna-card{padding:18px} .dna-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px} .dna-find{position:relative;width:260px} .dna-find input{width:100%;background:var(--card2);border:1px solid var(--border2);color:var(--text); border-radius:9px;padding:10px 13px;font-size:13.5px;outline:none} .dna-find input:focus{border-color:var(--accent)} .dna-legend{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto} .dna-leg{display:flex;align-items:center;gap:5px;background:var(--card2);border:1px solid var(--border2); color:var(--text);border-radius:7px;padding:5px 9px;font-size:11.5px;font-weight:700;cursor:pointer} .dna-leg .dot{width:9px;height:9px;border-radius:50%} .dna-leg.off{opacity:.4} .dna-stage{position:relative;height:620px;border-radius:14px;overflow:hidden;cursor:grab; background:radial-gradient(circle at 50% 38%,#0f1521,#0a0e16);border:1px solid var(--border2)} #dna{display:block} .dna-tip{display:none;position:absolute;z-index:10;pointer-events:none;background:rgba(10,14,22,.97); border:1px solid var(--border2);border-radius:10px;padding:8px 10px;gap:9px;align-items:center; box-shadow:0 10px 26px rgba(0,0,0,.55);max-width:240px} .dna-tip img{width:40px;height:40px;border-radius:50%;background:#1b2436;object-fit:cover;flex:none} .dna-tip b{font-size:13px;display:block} .dna-tip span{font-size:11px;color:var(--muted);display:block} .dna-axis{position:absolute;color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.5px; pointer-events:none;text-transform:uppercase;opacity:.65} .dna-axis-x{right:14px;bottom:10px} .dna-axis-y{left:12px;top:10px} .dna-foot{margin-top:12px;font-size:13px;color:var(--muted);min-height:20px;line-height:1.6} .dna-foot a{color:var(--accent);font-weight:600} .dna-foot b{color:var(--text)} /* ===== Followed / saved button state ===== */ .btn.on{background:rgba(47,191,113,.16);border-color:#2fbf71;color:#7ee0a6} /* ===== My Profile ===== */ .pf-head{display:flex;gap:22px;align-items:center} .pf-ava{width:84px;height:84px;border-radius:50%;flex:none;display:flex;align-items:center; justify-content:center;font-size:30px;font-weight:800;color:#fff;background:linear-gradient(135deg,#5570f0,#7d5cf5)} .pf-id{flex:1;min-width:0} .pf-id h2{font-size:24px;display:flex;align-items:center;gap:8px} .pf-edit{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px} .pf-edit:hover{color:var(--text)} .pf-name-input{background:var(--card2);border:1px solid var(--accent);color:var(--text); border-radius:8px;padding:4px 9px;font-size:20px;font-weight:800;width:min(320px,70%)} .pf-sub{color:var(--muted);font-size:13px;margin:4px 0 13px} .pf-stats{display:flex;gap:28px;flex-wrap:wrap} .pf-stat b{font-size:22px;font-weight:800;display:block} .pf-stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px} .pf-tabs{display:flex;gap:8px;margin:18px 0;flex-wrap:wrap} .pf-tab{background:var(--card2);border:1px solid var(--border2);color:var(--muted);border-radius:9px; padding:8px 14px;font-weight:700;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px} .pf-tab.active{background:var(--accent);border-color:var(--accent);color:#fff} .pf-tab i{font-style:normal;font-size:11px;background:rgba(255,255,255,.14);padding:1px 6px;border-radius:8px} .pf-tab.active i{background:rgba(255,255,255,.25)} .pf-ov{margin-bottom:16px} .pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px} .pf-pcard{display:flex;align-items:center;background:var(--card2);border:1px solid var(--border2); border-radius:11px;overflow:hidden} .pf-pcard-main{flex:1;display:flex;align-items:center;gap:11px;padding:9px 12px;color:var(--text);min-width:0} .pf-pcard-main:hover{background:rgba(255,255,255,.03)} .pf-ava-sm,.pf-crest{width:38px;height:38px;border-radius:50%;flex:none;position:relative;overflow:hidden; background:#1b2436;display:flex;align-items:center;justify-content:center} .pf-ava-sm .ini{font-size:13px;font-weight:700;color:#aab3c6} .pf-ava-sm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pf-crest{background:transparent;font-size:18px} .pf-crest .crest{width:32px;height:32px;object-fit:contain} .pf-pc-tx{flex:1;min-width:0} .pf-pc-tx b{font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pf-pc-tx span{font-size:11.5px;color:var(--muted)} .pf-pc-rat{font-size:15px;font-weight:800;color:var(--accent2)} .pf-rm{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:0 12px;align-self:stretch} .pf-rm:hover{color:#e5484d;background:rgba(229,72,68,.08)} .pf-cmps{display:flex;flex-direction:column;gap:8px} .pf-cmp{display:flex;align-items:center;background:var(--card2);border:1px solid var(--border2);border-radius:10px} .pf-cmp a{flex:1;display:flex;align-items:center;gap:10px;padding:11px 14px;color:var(--text);font-size:14px} .pf-cmp a:hover{background:rgba(255,255,255,.03)} .pf-cmp-ic{color:var(--accent2);font-weight:800} .pf-jump{background:none;border:none;color:var(--accent);font-weight:600;cursor:pointer;font-size:12px} .pf-empty{text-align:center;padding:34px 20px;color:var(--muted)} .pf-empty-ic{font-size:32px;margin-bottom:10px} .pf-empty p{font-size:13.5px;margin:0 auto 14px;max-width:420px;line-height:1.5} /* ===== Notifications (bell + panel) ===== */ .nbell-wrap{position:relative} .nbell{position:relative;background:none;border:none;cursor:pointer;font-size:17px;line-height:1;padding:4px;color:inherit} .nbadge{position:absolute;top:-3px;right:-4px;min-width:15px;height:15px;padding:0 3px;border-radius:8px; background:#e5484d;color:#fff;font-size:9px;font-weight:800;font-style:normal;align-items:center; justify-content:center;display:none;line-height:1} .npanel{position:absolute;top:36px;right:0;width:336px;max-height:460px;overflow:auto;background:var(--card); border:1px solid var(--border2);border-radius:12px;box-shadow:0 18px 46px rgba(0,0,0,.55);z-index:60;display:none} .npanel.open{display:block} .npanel-h{display:flex;justify-content:space-between;align-items:center;padding:12px 14px; border-bottom:1px solid var(--border);font-size:14px;position:sticky;top:0;background:var(--card)} .npanel-h button{background:none;border:none;color:var(--accent);font-weight:600;cursor:pointer;font-size:12px} .npanel-perm{width:calc(100% - 24px);margin:10px 12px 4px;padding:9px;border-radius:9px;border:1px solid var(--accent); background:rgba(85,112,240,.14);color:var(--text);font-weight:600;font-size:12.5px;cursor:pointer} .npanel-list{display:flex;flex-direction:column} .nitem{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--border);color:var(--text)} .nitem:last-child{border-bottom:none} .nitem:hover{background:var(--card2)} .nitem.unread{background:rgba(85,112,240,.08)} .nitem.big{background:rgba(236,202,107,.1)} .nitem-ic{font-size:18px;flex:none;width:22px;text-align:center} .nitem-tx{flex:1;min-width:0} .nitem-tx b{font-size:13px;display:block;font-weight:700;line-height:1.25} .nitem-tx span{font-size:11.5px;color:var(--muted)} .nitem-ago{font-size:10.5px;color:var(--muted);white-space:nowrap;padding-top:2px} .npanel-empty{padding:32px 18px;text-align:center;color:var(--muted);font-size:13px;line-height:1.7} /* league crest chip in the sidebar (replaces the colour square) */ .navi.league .lglogo{width:20px;height:20px;border-radius:5px;background:#fff;flex:none; display:inline-flex;align-items:center;justify-content:center;overflow:hidden} .navi.league .lglogo img{width:16px;height:16px;object-fit:contain;display:block} /* ===== Profile: identity header + edit form ===== */ .pf-ava{overflow:hidden} .pf-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%} .pf-id-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pf-id-top h2{font-size:24px;margin:0} .pf-handle{color:var(--muted);font-size:14px;font-weight:600} .pf-editbtn{margin-left:auto;padding:6px 13px;font-size:12.5px} .pf-loc{color:var(--muted);font-size:12.5px;margin:6px 0 0} .pf-bio{font-size:13.5px;color:var(--text);margin:11px 0 0;line-height:1.55;max-width:640px} .pf-fav{margin-top:13px} .pf-fav-lbl{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-bottom:6px} .pf-favchips{display:flex;gap:8px;flex-wrap:wrap} .pf-favchip{display:inline-flex;align-items:center;gap:7px;background:var(--card2);border:1px solid var(--border2); border-radius:20px;padding:4px 13px 4px 4px;color:var(--text);font-size:12.5px;font-weight:600} .pf-favchip:hover{border-color:var(--accent)} .pf-favchip img{width:22px;height:22px;border-radius:50%;object-fit:cover;background:#1b2436;flex:none} .pf-favchip i,.pf-favchip>span i{display:flex} .pf-favchip i{width:22px;height:22px;border-radius:50%;background:#28324a;align-items:center;justify-content:center; font-size:9px;font-style:normal;font-weight:700;color:#aab3c6;flex:none} .pf-favchip.editable{padding-right:7px} .pf-favchip-rm{background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;padding:0 2px} .pf-favchip-rm:hover{color:#e5484d} .pf-fav-none{font-size:12px;color:var(--muted)} .pf-edit{display:flex;gap:26px;width:100%;flex-wrap:wrap} .pf-edit-pic{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none} .pf-pic-btn{background:var(--card2);border:1px solid var(--border2);border-radius:8px;padding:6px 16px; font-size:12px;font-weight:600;cursor:pointer;color:var(--text)} .pf-pic-btn:hover{border-color:var(--accent)} .pf-pic-rm{background:none;border:none;color:var(--muted);font-size:11.5px;cursor:pointer} .pf-pic-rm:hover{color:#e5484d} .pf-edit-fields{flex:1;min-width:300px;display:flex;flex-direction:column;gap:13px} .pf-row{display:flex;gap:12px;flex-wrap:wrap} .pf-row .pf-field{flex:1;min-width:150px} .pf-field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px; color:var(--muted);margin-bottom:5px} .pf-field input,.pf-field textarea{width:100%;background:var(--card2);border:1px solid var(--border2);color:var(--text); border-radius:8px;padding:9px 11px;font-size:13.5px;font-family:inherit;outline:none;resize:vertical} .pf-field input:focus,.pf-field textarea:focus{border-color:var(--accent)} .pf-fav-add{position:relative;margin-top:8px} .pf-fav-add input{width:100%;background:var(--card2);border:1px solid var(--border2);color:var(--text); border-radius:8px;padding:8px 11px;font-size:13px;outline:none} .pf-fav-add .card-dd{top:42px} .pf-edit-actions{display:flex;gap:10px;margin-top:8px} /* clickable topbar avatar -> profile */ .avatar{cursor:pointer} .avatar.avatar-ini{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff} /* ===== Match Preview (use case 19) ===== */ .pv-pick{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap} .pv-pick-team{flex:1;min-width:220px} .pv-pick-team label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:8px} .pv-pick-team .card-search input{width:100%;background:var(--card2);border:1px solid var(--border2);color:var(--text);border-radius:10px;padding:11px 14px;font-size:14px;outline:none} .pv-pick-vs{font-weight:800;color:var(--muted);padding-bottom:11px} .pv-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px} .pv-team{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;color:var(--text);text-align:center} .pv-team h3{font-size:19px;margin:0}.pv-team span{font-size:12px;color:var(--muted)} .pv-crest{width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-size:34px} .pv-crest .crest{width:60px;height:60px;object-fit:contain} .pv-vs{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none} .pv-vs span{font-size:22px;font-weight:800;color:var(--muted)} .pv-vs small{font-size:11px;color:var(--muted)} .pv-pred{margin-top:18px} .pv-bar{display:flex;height:30px;border-radius:8px;overflow:hidden;font-size:12px;font-weight:800;color:#fff} .pv-bar i{display:flex;align-items:center;justify-content:center;min-width:24px} .pv-bar .h{background:linear-gradient(90deg,#5570f0,#7d5cf5)}.pv-bar .d{background:#3a4255}.pv-bar .a{background:#e5616a} .pv-bar-leg{display:flex;justify-content:space-between;margin-top:9px;font-size:12px;color:var(--muted)} .pv-bar-leg .dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px} .pv-bar-leg .dot.h{background:#6a78f2}.pv-bar-leg .dot.d{background:#3a4255}.pv-bar-leg .dot.a{background:#e5616a} .pv-score{margin-top:12px;font-size:13px;color:var(--muted);text-align:center} .pv-score b{color:var(--text)} .pv-form{margin-top:18px} .pv-form-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px} .pv-form-pills{display:flex;gap:5px}.pv-form-pills.away{justify-content:flex-end} .pv-form-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px} .pv-fp{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff} .pv-fp.w{background:#2fbf71}.pv-fp.d{background:#8a93a6}.pv-fp.l{background:#e5484d} .pv-stat{display:grid;grid-template-columns:54px 1fr 54px;align-items:center;gap:12px;padding:7px 0} .pv-stat>b{font-size:15px;font-weight:800;text-align:center} .pv-mid{display:flex;flex-direction:column;gap:5px} .pv-mid span{font-size:11.5px;color:var(--muted);text-align:center} .pv-sbar{display:flex;height:6px;border-radius:4px;overflow:hidden;background:var(--border2)} .pv-sbar .h{background:#6a78f2}.pv-sbar .a{background:#e5616a} .pv-keyrow{display:grid;grid-template-columns:1fr 92px 1fr;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)} .pv-keyrow:last-child{border-bottom:none} .pv-keylbl{text-align:center;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)} .pv-kp{display:flex;align-items:center;gap:10px;color:var(--text)} .pv-kp.a{flex-direction:row-reverse;text-align:right} .pv-kp.empty{color:var(--muted);justify-content:center} .pv-kp-ph{width:38px;height:38px;border-radius:50%;overflow:hidden;position:relative;background:#1b2436;flex:none} .pv-kp-ph .ini{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#aab3c6} .pv-kp-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pv-kp-tx b{font-size:13.5px;display:block}.pv-kp-tx span{font-size:11px;color:var(--muted)} .pv-h2h-tally{display:flex;justify-content:space-around;text-align:center;margin-bottom:14px} .pv-h2h-t b{font-size:26px;font-weight:800;display:block}.pv-h2h-t span{font-size:11.5px;color:var(--muted)} .pv-h2h-list{display:flex;flex-direction:column;gap:6px} .pv-h2h-row{display:grid;grid-template-columns:78px 1fr auto 1fr;align-items:center;gap:10px;font-size:13px;padding:7px 10px;background:var(--card2);border-radius:8px} .pv-h2h-row>span:first-child{color:var(--muted);font-size:11.5px} .pv-h2h-row b:nth-of-type(1){text-align:right}.pv-h2h-row b:nth-of-type(2){text-align:left} .pv-h2h-sc{font-weight:800;background:var(--bg);padding:2px 9px;border-radius:6px} /* ===== Big Game Index (use case 2) ===== */ .bg-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:980px){.bg-grid{grid-template-columns:1fr}} .bg-col{padding:14px} .bg-col h3.ok{color:#2fbf71}.bg-col h3.bad{color:#e5616a} .bg-row{display:grid;grid-template-columns:24px 38px 1fr 200px 54px;align-items:center;gap:11px; padding:9px 8px;border-bottom:1px solid var(--border);color:var(--text)} .bg-row:last-child{border-bottom:none}.bg-row:hover{background:var(--card2)} .bg-rank{color:var(--muted);font-weight:700;font-size:12px;text-align:center} .bg-ph{width:38px;height:38px;border-radius:50%;position:relative;overflow:hidden;background:#1b2436;flex:none} .bg-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .bg-ph .ini{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#aab3c6} .bg-id{min-width:0}.bg-id b{font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bg-id span{font-size:11px;color:var(--muted)} .bg-split{display:flex;flex-direction:column;gap:6px} .bg-sb label{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-bottom:2px;font-weight:600} .bg-sb label i{font-style:normal;color:var(--text);font-weight:700} .bg-bar{display:block;height:6px;border-radius:4px;background:var(--border2);overflow:hidden} .bg-bar i{display:block;height:100%;border-radius:4px} .bg-bar i.big{background:linear-gradient(90deg,#2fbf71,#7ee0a6)} .bg-bar i.weak{background:#8a93a6} .bg-delta{font-size:14px;font-weight:800;text-align:right} .bg-delta.up{color:#2fbf71}.bg-delta.down{color:#e5616a} .bg-note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.6;max-width:900px} /* profile big-game card */ .bgp{display:flex;flex-direction:column;gap:10px} .bgp-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:5px 12px;border-radius:20px; font-size:12px;font-weight:800} .bgp-badge.big{background:rgba(47,191,113,.16);color:#7ee0a6} .bgp-badge.bully{background:rgba(229,97,106,.16);color:#f0a0a5} .bgp-badge.neutral{background:var(--card2);color:var(--muted)} .bgp-split{display:flex;flex-direction:column;gap:9px;margin-top:2px} .bgp-row label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:3px} .bgp-row label b{color:var(--text)} .bgp-bar{height:8px;border-radius:5px;background:var(--border2);overflow:hidden} .bgp-bar i{display:block;height:100%;border-radius:5px} .bgp-bar i.big{background:linear-gradient(90deg,#2fbf71,#7ee0a6)}.bgp-bar i.weak{background:#8a93a6} /* ===== Match Previews — upcoming fixtures list + national-team preview ===== */ .pv-layout{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start;margin-top:18px} @media(max-width:900px){.pv-layout{grid-template-columns:1fr}} .pv-list-card{padding:14px} .pv-fixtures{display:flex;flex-direction:column;gap:8px;max-height:78vh;overflow:auto} .pv-fix{display:flex;flex-direction:column;gap:5px;padding:10px 12px;background:var(--card2); border:1px solid var(--border2);border-radius:10px;cursor:pointer;transition:.1s} .pv-fix:hover{border-color:var(--accent2)} .pv-fix.active{border-color:var(--accent);background:linear-gradient(180deg,rgba(85,112,240,.18),var(--card2))} .pv-fix-teams{display:flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;flex-wrap:wrap} .pv-fix-teams .nflag{font-size:15px} .pv-fix-v{color:var(--muted);font-weight:600;font-size:11px} .pv-fix-meta{font-size:11px;color:var(--muted)} .pv-keycols{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:620px){.pv-keycols{grid-template-columns:1fr}} .pv-keycol h5{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 8px} .pv-kpl{display:flex;align-items:center;gap:9px;padding:6px 0;color:var(--text)} .pv-kpl:hover{background:var(--card2)} .pv-kpl-ph{width:34px;height:34px;border-radius:50%;overflow:hidden;position:relative;background:#1b2436;flex:none} .pv-kpl-ph .ini{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#aab3c6} .pv-kpl-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pv-kpl-tx{min-width:0}.pv-kpl-tx b{font-size:13px;display:block}.pv-kpl-tx span{font-size:11px;color:var(--muted)} .pv-kpl-rat{margin-left:auto;font-weight:800;color:var(--accent2);font-size:15px} .pv-recent .pv-form-pills{margin-bottom:10px} .pv-rec-row{display:flex;align-items:center;gap:9px;font-size:12.5px;padding:4px 0;color:var(--muted)} .pv-rec-row b{color:var(--text);min-width:34px} .pv-vs small{display:block} /* club crest beside the rating; club name as plain left-aligned text */ .pm-headtxt{min-width:0} .pm-headright{display:flex;align-items:center;gap:10px;flex:none} .pm-crest{display:inline-flex;align-items:center} .pm-club{font-size:14px;margin-top:8px;color:var(--muted)} .pm-club-crest{width:30px;height:30px;object-fit:contain;flex:none} .pm-club-lbl{color:var(--muted)} .pm-club a{color:var(--text);font-weight:700} .pm-club a:hover{color:var(--accent)} /* ===== Player-card classification colour tiers ===== */ .pcard.t-bip{--c1:#f6d36b;--c2:#e0a23a;--ct:#3a2a05} .pcard.t-wc{--c1:#c07cff;--c2:#7d5cf5;--ct:#fff} .pcard.t-elite{--c1:#5aa6ff;--c2:#3a6ad6;--ct:#fff} .pcard.t-aa{--c1:#4fd99b;--c2:#2aa86f;--ct:#06200f} .pcard.t-avg{--c1:#aab4c6;--c2:#7f8b9f;--ct:#161b24} .pcard.t-ba{--c1:#d59a72;--c2:#b06a44;--ct:#fff} .pcard[class*=" t-"]::before{content:"";position:absolute;top:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--c1),var(--c2))} .pcard[class*=" t-"] .cls{background:linear-gradient(135deg,var(--c1),var(--c2));color:var(--ct); box-shadow:0 2px 8px color-mix(in srgb,var(--c2) 45%,transparent)} .pcard[class*=" t-"] .rt{border-color:var(--c1); box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 18%,transparent)} .pcard[class*=" t-"]:hover{border-color:var(--c1)} /* light/dark toggle button in the top bar */ .theme-toggle{background:none;border:none;cursor:pointer;font-size:16px;line-height:1;padding:4px;color:inherit} /* per-stat percentile bar + grouped (paired) stat tiles */ .tile{position:relative} .tpctw{margin-top:9px;display:flex;align-items:center;gap:7px;justify-content:center} .tpct{flex:1;max-width:60px;height:4px;border-radius:3px;background:rgba(150,158,178,.18);overflow:hidden} .tpct i{display:block;height:100%;border-radius:3px} .tpctn{font-size:10px;font-weight:800;flex:none} .tile.pair{grid-column:span 2;display:flex;padding:0;align-items:stretch} .tile.pair .tsub{flex:1;padding:14px 10px;text-align:center;min-width:0} .tile.pair .tsub:first-child{border-right:1px solid var(--border)} .tiles.compact .tile.pair .tsub{padding:10px 8px} /* head-to-head record summary */ .h2h-sum{text-align:center;font-size:14px;margin:0 0 14px;padding:9px;background:var(--card2);border:1px solid var(--border);border-radius:10px} /* head-to-head competition chip */ .mcomp{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:20px;font-size:10px;font-weight:700; background:var(--card2);border:1px solid var(--border2);color:var(--muted)} .mcomp.ucl{background:var(--accent-soft);border-color:transparent;color:var(--accent2)} /* clickable player name -> profile (match player-stats table) */ .pl-name-link{color:var(--text);font-weight:600;text-decoration:none} .pl-name-link:hover{color:var(--accent2);text-decoration:underline} /* ---- optional accounts: sidebar control + auth modal ---- */ .sb-auth{display:block;width:100%;margin-top:8px;padding:8px;border-radius:9px;cursor:pointer; background:var(--accent-soft);border:1px solid var(--border2);color:var(--text);font:inherit;font-size:12.5px;font-weight:700} .sb-auth:hover{border-color:var(--accent)} .sb-auth.out{background:none;color:var(--muted);font-weight:600} .sb-auth.out:hover{color:var(--red);border-color:var(--red)} .auth-ov{position:fixed;inset:0;z-index:100;background:rgba(4,7,14,.6);backdrop-filter:blur(3px); display:flex;align-items:center;justify-content:center;padding:20px} .auth-card{position:relative;width:100%;max-width:380px;background:var(--card);border:1px solid var(--border2); border-radius:16px;padding:26px;box-shadow:0 24px 60px rgba(0,0,0,.5)} .auth-x{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer} .auth-h{font-size:20px;font-weight:800} .auth-sub{color:var(--muted);font-size:12.5px;line-height:1.5;margin:6px 0 16px} .auth-tabs{display:flex;gap:6px;background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:3px;margin-bottom:14px} .auth-tabs button{flex:1;padding:8px;border:none;border-radius:7px;background:none;color:var(--muted);font:inherit;font-weight:700;font-size:13px;cursor:pointer} .auth-tabs button.active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff} #authForm{display:flex;flex-direction:column;gap:10px} #authForm input{background:var(--elev);border:1px solid var(--border2);border-radius:9px;padding:11px 13px;color:var(--text);font:inherit;font-size:14px} #authForm input:focus{outline:none;border-color:var(--accent)} .auth-err{color:var(--red);font-size:12.5px;min-height:16px;font-weight:600} .auth-go{width:100%;justify-content:center} /* ---- league leaders (Teams page, per league) ---- */ .ll-sec{margin-top:18px} .ll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px} .ll-card{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:12px 12px 10px} .ll-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:9px} .ll-lead{display:flex;align-items:center;gap:10px} .ll-ph{width:40px;height:40px;border-radius:50%;flex:none;background:var(--elev);font-size:13px} .ll-nm{display:flex;flex-direction:column;min-width:0;flex:1} .ll-nm b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ll-nm small{color:var(--muted);font-size:11.5px} .ll-v{font-size:20px;font-weight:800;color:var(--accent2);flex:none} .ll-rest{margin-top:8px;border-top:1px solid var(--border);padding-top:6px;display:flex;flex-direction:column;gap:2px} .ll-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:2px 0;color:var(--muted)} .ll-row:hover{color:var(--text)} .ll-rk{width:14px;text-align:center;font-weight:700;color:var(--muted2)} .ll-rn{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ll-row b{color:var(--text)} /* ---- per-league sub-tabs + fixtures list ---- */ .lg-subtabs{margin:2px 0 16px;gap:22px} .fx-list{display:flex;flex-direction:column} .fx-date{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2); padding:14px 2px 6px;border-bottom:1px solid var(--border)} .fx-row{display:grid;grid-template-columns:1fr 74px 1fr 120px;align-items:center;gap:10px; padding:9px 4px;border-bottom:1px solid var(--border);font-size:14px} .fx-row:last-child{border-bottom:none} .fx-t{display:flex;align-items:center;gap:9px;min-width:0;color:var(--text)} .fx-t .tn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fx-t.home{justify-content:flex-end;text-align:right} .fx-t.away{justify-content:flex-start} .fx-t:hover .tn{color:var(--accent2)} .fx-sc{text-align:center;font-weight:800;font-size:15px;letter-spacing:1px} .fx-dash{color:var(--muted2);margin:0 4px;font-weight:600} .fx-xg{font-size:12px;text-align:right;white-space:nowrap} @media(max-width:640px){.fx-row{grid-template-columns:1fr 60px 1fr}.fx-xg{display:none}} /* per-league sub-tab bar + season picker */ .lg-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px} .lg-bar .lg-subtabs{margin:0} .lg-season{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:7px} /* Champions League hub: champion banner + knockout bracket */ .ucl-champ{display:flex;align-items:center;gap:16px;background:linear-gradient(160deg,var(--accent-soft),var(--card2)); border:1px solid var(--border2);border-radius:var(--radius);padding:16px 20px;margin-bottom:18px} .ucl-trophy{font-size:34px;line-height:1} .ucl-champ-x{display:flex;flex-direction:column;gap:4px} .ucl-champ-x small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)} .ucl-champ-x a{display:flex;align-items:center;gap:10px;color:var(--text);font-size:20px;font-weight:800} .ucl-champ-x a:hover{color:var(--accent2)} /* UCL match rows carry no per-match xG, so drop the fixtures' 4th column */ .ucl-fx .fx-row{grid-template-columns:1fr 74px 1fr} @media(max-width:640px){.ucl-fx .fx-row{grid-template-columns:1fr 60px 1fr}} /* knockout bracket: round columns, ties auto-centred between their two feeders */ .bkt{display:flex;align-items:stretch;overflow-x:auto;padding:2px 0 8px} .bkt-col{display:flex;flex-direction:column;flex:1 1 0;min-width:172px} .bkt-rh{text-align:center;font-size:11.5px;letter-spacing:1px;text-transform:uppercase; font-weight:800;color:var(--muted);padding-bottom:10px} .bkt-col-body{flex:1;display:flex;flex-direction:column} .bkt-tie-wrap{flex:1;min-height:58px;display:flex;align-items:center;position:relative;padding:0 16px} .bkt-tie{width:100%;position:relative;background:var(--card2);border:1px solid var(--border); border-radius:9px;overflow:hidden;cursor:pointer;transition:border-color .12s,transform .12s} .bkt-tie:hover{border-color:var(--accent);transform:translateY(-1px)} .bkt-tie.live{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset} .bkt-live-tag{position:absolute;top:-7px;right:8px;background:var(--red);color:#fff;font-size:9px; font-weight:800;letter-spacing:.4px;padding:1px 6px;border-radius:6px;line-height:1.5} .bkt-row{display:flex;align-items:center;gap:7px;padding:6px 9px;font-size:13px;color:var(--text)} .bkt-row+.bkt-row{border-top:1px solid var(--border)} .bkt-row.win{font-weight:800} .bkt-row.lose{opacity:.5} .bkt-row.tbd{color:var(--muted2);font-style:italic} .bkt-tm{display:flex;align-items:center;gap:7px;min-width:0;color:inherit} .bkt-tm .tn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bkt-tie:hover .bkt-tm .tn{color:var(--accent2)} .bkt-row b{margin-left:auto;padding-left:8px;font-variant-numeric:tabular-nums} /* connector lines: outgoing stub (right), incoming vertical + stub (left) */ .bkt-col:not(:last-child) .bkt-tie-wrap::after{content:'';position:absolute;top:50%;right:0; width:16px;height:2px;background:var(--line)} .bkt-col:not(:first-child) .bkt-tie-wrap::before{content:'';position:absolute;left:0;top:25%;bottom:25%; width:2px;background:var(--line)} .bkt-col:not(:first-child) .bkt-tie::before{content:'';position:absolute;top:50%;left:-16px; width:16px;height:2px;background:var(--line)} /* World Cup hub: flags, champion name, group-standings grid */ .wc-flag{font-size:16px;line-height:1;flex:none} .fifa-rank{flex:none;display:inline-block;vertical-align:middle;margin:0 3px;font-size:10px;font-weight:700; color:var(--muted2);background:var(--card2);border:1px solid var(--border);border-radius:5px;padding:0 4px;line-height:15px} .fifa-rank .fr-cap{display:none} /* caption hidden in compact lists by default */ .bkt-row .fifa-rank{font-size:9px;padding:0 3px;line-height:13px} /* live-matches feed + match header: captioned ("FIFA #4") and larger */ .match .fifa-rank,.mh-team .fifa-rank{font-size:12.5px;line-height:19px;padding:1px 7px;margin:0 7px;color:var(--text)} .match .fifa-rank .fr-cap,.mh-team .fifa-rank .fr-cap{display:inline;font-weight:800;color:var(--accent2);letter-spacing:.4px} #liveMatches .fifa-rank{display:none} /* home-page live widget only — keep it clean */ .wc-pens{display:block;font-size:10px;font-weight:600;color:var(--muted2);letter-spacing:0;margin-top:1px} .bkt-row .wc-flag{font-size:15px} .wc-champ-nm{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800} .wc-champ-nm .wc-flag{font-size:24px} .wc-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;align-items:start} .wc-grp{padding:14px 16px} .wc-grp .card-h{margin-bottom:8px} .wc-grp .ltbl{width:100%} .wc-grp .ltbl td,.wc-grp .ltbl th{padding:5px 5px} /* narrow group cards can't afford the 180px team column the league table uses -- let it size to the (short) national-team names so the stat columns sit tight. */ .wc-grp .ltbl .tcell{display:flex;align-items:center;gap:8px;min-width:0} .wc-grp .ltbl th:nth-child(2),.wc-grp .ltbl td.tcell{width:100%} .wc-grp .ltbl .tn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---- shared games: leaderboard + small bits ---- */ .lb{width:100%;border-collapse:collapse;font-size:13.5px} .lb th{text-align:left;color:var(--muted2);font-size:11px;letter-spacing:.6px;text-transform:uppercase; font-weight:700;padding:6px 8px;border-bottom:1px solid var(--border)} .lb td{padding:8px;border-bottom:1px solid var(--border)} .lb td.rk{width:34px;color:var(--muted);font-weight:700} .lb td.sc{text-align:right;font-weight:800;font-variant-numeric:tabular-nums} .lb td.who{font-weight:600} .lb tr.me{background:var(--accent-soft)} .lb tr.me td.who{color:var(--accent)} .lb-empty{color:var(--muted);padding:22px;text-align:center;font-size:13px} .lb-nudge{margin-top:12px;font-size:12.5px;color:var(--muted);background:var(--card2); border:1px solid var(--border);border-radius:10px;padding:10px 13px} .lb-nudge a{color:var(--accent);font-weight:600;text-decoration:none} .game-sub{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center} .pill-btn{background:var(--card2);border:1px solid var(--border2);color:var(--text);border-radius:20px; padding:6px 14px;font-size:12.5px;font-weight:600;cursor:pointer} .pill-btn.active{background:linear-gradient(90deg,var(--accent),var(--accent2));border-color:transparent;color:#fff}