:root{--pitch-dark:#0a3d2e;--pitch:#124e38;--pitch-light:#1a6847;--gold:#f5c23b;--gold-bright:#ffd85c;--red:#e63946;--red-deep:#b5172a;--cream:#f4ecd8;--line:rgba(245,194,59,0.25);--line-soft:rgba(255,255,255,0.1);--font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",system-ui,-apple-system,sans-serif;--font-display:var(--font-body);--font-sub:var(--font-body);--font-num:"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:var(--pitch-dark);color:var(--cream);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}body::before{content:"";position:fixed;inset:0;background:repeating-linear-gradient(90deg,var(--pitch-dark)0,var(--pitch-dark)120px,var(--pitch)120px,var(--pitch)240px);opacity:0.6;pointer-events:none;z-index:0}body::after{content:"";position:fixed;inset:0;background:radial-gradient(800px ellipse at 50% -10%,rgba(245,194,59,0.18),transparent 60%),radial-gradient(600px ellipse at 10% 100%,rgba(230,57,70,0.1),transparent 60%);pointer-events:none;z-index:0}.page{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:56px 20px 80px}.hero{position:relative;padding:28px 36px;margin-bottom:32px;background:linear-gradient(135deg,rgba(10,61,46,0.6),rgba(18,78,56,0.8)),linear-gradient(90deg,var(--red)0%,var(--red)33%,var(--cream)33%,var(--cream)66%,#006847 66%,#006847 100%);background-blend-mode:multiply;border:2px solid var(--gold);border-radius:20px;overflow:hidden;box-shadow:0 0 40px rgba(245,194,59,0.2)}.hero::before{content:"";position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,var(--gold)0%,transparent 70%);opacity:0.25;pointer-events:none}.hero-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.hero-left{display:flex;align-items:center;gap:20px}.trophy{width:54px;height:64px;position:relative;flex-shrink:0}.trophy::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:34px;height:44px;background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-radius:50% 50% 20% 20% / 40% 40% 20% 20%;box-shadow:0 0 20px rgba(245,194,59,0.6)}.trophy::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:26px;height:16px;background:linear-gradient(180deg,var(--gold),#b8881c);border-radius:4px;box-shadow:0 -4px 0 #b8881c}.hero-title{font-family:var(--font-body);font-weight:900;font-size:32px;line-height:1.1;letter-spacing:4px;color:var(--gold-bright);text-shadow:0 2px 10px rgba(0,0,0,0.4)}.hero-title small{display:block;font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--cream);letter-spacing:6px;margin-top:6px;opacity:0.9}.hero-right{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}.flags{display:flex;gap:6px}.flag{width:30px;height:20px;border-radius:2px;border:1px solid rgba(255,255,255,0.3);position:relative;overflow:hidden}.flag-usa{background:linear-gradient(180deg,#b22234 0%,#b22234 15%,#fff 15%,#fff 30%,#b22234 30%,#b22234 45%,#fff 45%,#fff 60%,#b22234 60%,#b22234 75%,#fff 75%,#fff 90%,#b22234 90%)}.flag-usa::before{content:"";position:absolute;top:0;left:0;width:40%;height:55%;background:#3c3b6e}.flag-canada{background:linear-gradient(90deg,#ff0000 0%,#ff0000 25%,#fff 25%,#fff 75%,#ff0000 75%)}.flag-canada::before{content:"🍁";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px}.flag-mexico{background:linear-gradient(90deg,#006847 0%,#006847 33%,#fff 33%,#fff 66%,#ce1126 66%)}.countdown{font-family:var(--font-body);font-weight:700;font-size:15px;letter-spacing:2px;color:var(--cream);padding:8px 16px;border:1px solid var(--gold);border-radius:8px;background:rgba(0,0,0,0.3)}.countdown span{color:var(--gold-bright);font-family:var(--font-num);font-weight:700;font-size:18px;letter-spacing:1px;margin-left:4px}.marquee{position:relative;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);background:linear-gradient(90deg,rgba(230,57,70,0.15),rgba(245,194,59,0.1),rgba(0,104,71,0.15));overflow:hidden;padding:12px 0;margin-bottom:36px}.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none}.marquee::before{left:0;background:linear-gradient(90deg,var(--pitch-dark),transparent)}.marquee::after{right:0;background:linear-gradient(270deg,var(--pitch-dark),transparent)}.marquee-track{display:flex;gap:50px;white-space:nowrap;animation:scroll 10s linear infinite;font-family:var(--font-sub);font-size:14px;letter-spacing:1px;color:var(--cream)}.marquee-track .item{display:inline-flex;align-items:center;gap:10px}.marquee-track .ball{font-size:16px}.marquee-track b{color:#0a3d2e;font-family:var(--font-num);font-weight:700;padding:2px 10px;background:var(--gold);border-radius:4px;letter-spacing:1px}@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}.section-title{font-family:var(--font-body);font-weight:900;font-size:20px;letter-spacing:3px;color:var(--gold);margin-bottom:16px;padding-left:14px;border-left:4px solid var(--red);display:flex;align-items:center;gap:14px}.section-title .section-sub{font-weight:400;font-size:13px;letter-spacing:2px;color:var(--cream);opacity:0.65}.section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}.categories{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:40px}.cat{position:relative;padding:20px 12px;border:1px solid var(--line-soft);border-radius:12px;background:rgba(10,61,46,0.5);text-align:center;cursor:pointer;transition:all 0.3s ease;backdrop-filter:blur(6px)}.cat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--gold),#006847);border-radius:12px 12px 0 0;transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease}.cat:hover{border-color:var(--gold);background:rgba(26,104,71,0.6);transform:translateY(-3px);box-shadow:0 10px 30px rgba(245,194,59,0.2)}.cat:hover::before{transform:scaleX(1)}.cat-icon{width:44px;height:44px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:24px;border-radius:50%;background:radial-gradient(circle,rgba(245,194,59,0.2),transparent)}.cat-label{font-family:var(--font-sub);font-size:14px;font-weight:500;color:var(--cream);letter-spacing:1px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{position:relative;padding:24px 22px 22px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(26,104,71,0.35),rgba(10,61,46,0.7));backdrop-filter:blur(8px);transition:all 0.35s ease;overflow:hidden;cursor:pointer}.jersey-num{position:absolute;top:-2px;left:20px;font-family:var(--font-num);font-weight:900;font-style:italic;font-size:26px;color:var(--pitch-dark);background:var(--gold);padding:6px 12px 4px;border-radius:0 0 8px 8px;letter-spacing:0;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,0.3)}.live-badge{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:5px;font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:1px;color:var(--red)}.live-badge::before{content:"";width:7px;height:7px;background:var(--red);border-radius:50%;box-shadow:0 0 10px var(--red);animation:blink 1.5s ease-in-out infinite}@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}.card:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 20px 40px rgba(0,0,0,0.4),0 0 40px rgba(245,194,59,0.15)}.logo-box{position:relative;height:100px;margin-top:24px;margin-bottom:18px;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,0.06)0%,rgba(255,255,255,0.02)100%),radial-gradient(ellipse at center,rgba(245,194,59,0.08),transparent 70%);border:1px solid rgba(245,194,59,0.18);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all 0.35s ease}.logo-box::before{content:"⚽";position:absolute;top:8px;right:10px;font-size:14px;opacity:0.35;z-index:2}.logo-box img{max-width:80%;max-height:70%;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4));transition:transform 0.35s ease}.card:hover .logo-box{border-color:rgba(245,194,59,0.4);background:linear-gradient(135deg,rgba(255,255,255,0.1)0%,rgba(255,255,255,0.03)100%),radial-gradient(ellipse at center,rgba(245,194,59,0.14),transparent 70%)}.card:hover .logo-box img{transform:scale(1.06)}.rating{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px}.rating-stars{color:var(--gold);font-size:13px;letter-spacing:3px;text-shadow:0 0 8px rgba(245,194,59,0.5)}.rating-score{font-family:var(--font-num);font-weight:700;font-size:16px;color:var(--cream);padding-left:10px;border-left:1px solid var(--line)}.perks{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:18px;min-height:28px}.perk{font-family:var(--font-sub);font-size:11px;font-weight:500;letter-spacing:1px;padding:4px 10px;border-radius:4px;color:var(--cream);background:rgba(245,194,59,0.12);border:1px solid rgba(245,194,59,0.3)}.perk.hot{color:var(--gold-bright);background:rgba(230,57,70,0.2);border-color:var(--red)}.btn-group{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btn-action-tech{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:12px 10px;font-family:var(--font-body);font-size:15px;font-weight:700;letter-spacing:3px;border:none;border-radius:8px;cursor:pointer;position:relative;overflow:hidden;transition:all 0.25s ease}.btn-action-tech::before{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);transition:left 0.6s ease}.btn-action-tech:hover::before{left:150%}.btn-action-tech.btn-primary{color:var(--pitch-dark);background:linear-gradient(180deg,var(--gold-bright)0%,var(--gold)100%);box-shadow:0 4px 0 #b8881c,0 6px 14px rgba(0,0,0,0.3)}.btn-action-tech.btn-primary:hover{background:linear-gradient(180deg,#fff 0%,var(--gold-bright)100%);transform:translateY(2px);box-shadow:0 2px 0 #b8881c,0 4px 14px rgba(245,194,59,0.5)}.btn-action-tech.btn-primary:active{transform:translateY(4px);box-shadow:0 0 0 #b8881c}.btn-action-tech.btn-secondary{color:var(--gold-bright);background:rgba(245,194,59,0.08);border:1.5px solid var(--gold);box-shadow:0 4px 0 rgba(184,136,28,0.4),0 6px 14px rgba(0,0,0,0.25)}.btn-action-tech.btn-secondary:hover{color:var(--pitch-dark);background:var(--gold-bright);transform:translateY(2px);box-shadow:0 2px 0 rgba(184,136,28,0.6),0 4px 14px rgba(245,194,59,0.4)}.btn-action-tech.btn-secondary:active{transform:translateY(4px);box-shadow:0 0 0 transparent}.btn-icon{display:inline-block;width:12px;height:12px;position:relative}.btn-icon-download::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:7px;background:currentColor}.btn-icon-download::after{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%)rotate(45deg);width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor}.btn-icon-download{border-bottom:2px solid currentColor;padding-bottom:1px}.btn-icon-user{border:2px solid currentColor;border-radius:50%;width:11px;height:11px;position:relative}.btn-icon-user::before{content:"";position:absolute;top:1px;left:50%;transform:translateX(-50%);width:3px;height:3px;background:currentColor;border-radius:50%}.btn-icon-user::after{content:"";position:absolute;bottom:0px;left:50%;transform:translateX(-50%);width:6px;height:3px;background:currentColor;border-radius:3px 3px 0 0}.footer{margin-top:50px;padding-top:24px;border-top:1px solid var(--line-soft);text-align:center;font-family:var(--font-body);font-weight:500;font-size:13px;letter-spacing:3px;color:rgba(244,236,216,0.55)}.footer .stadiums{margin-top:10px;font-size:12px;letter-spacing:2px;opacity:0.75}@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr);gap:14px}.hero-title{font-size:26px;letter-spacing:3px}.hero-row{gap:16px}}@media(max-width:600px){.page{padding:32px 10px 50px}.hero{padding:16px 18px;margin-bottom:18px;border-radius:14px}.hero-row{gap:12px}.hero-left{gap:12px}.trophy{width:38px;height:46px}.trophy::before{width:24px;height:32px}.trophy::after{width:18px;height:12px}.hero-title{font-size:18px;letter-spacing:2px}.hero-title small{font-size:11px;letter-spacing:3px;margin-top:4px}.flag{width:22px;height:15px}.countdown{font-size:11px;padding:5px 10px;letter-spacing:1px}.countdown span{font-size:13px}.marquee{padding:8px 0;margin-bottom:18px}.marquee-track{font-size:12px;gap:32px}.section-title{font-size:15px;letter-spacing:2px;margin-bottom:10px;gap:8px}.section-title .section-sub{font-size:11px;letter-spacing:1px}.grid{grid-template-columns:repeat(2,1fr);gap:10px}.card{padding:14px 10px 12px;border-radius:12px}.jersey-num{font-size:18px;padding:4px 8px 3px;left:10px}.live-badge{font-size:10px;top:10px;right:10px}.live-badge::before{width:5px;height:5px}.logo-box{height:64px;margin-top:16px;margin-bottom:10px}.logo-box::before{font-size:11px;top:5px;right:6px}.rating{gap:5px;margin-bottom:8px}.rating-stars{font-size:11px;letter-spacing:2px}.rating-score{font-size:13px;padding-left:6px}.perks{gap:4px;margin-bottom:10px;min-height:22px}.perk{font-size:10px;padding:2px 6px;letter-spacing:0.5px}.btn-group{gap:5px}.btn-action-tech{padding:8px 4px;font-size:13px;letter-spacing:1px;gap:4px}.btn-icon{width:10px;height:10px}.footer{margin-top:28px;padding-top:16px;font-size:11px;letter-spacing:1.5px}.footer .stadiums{font-size:10px;letter-spacing:1px;margin-top:6px}}@media(max-width:380px){.card{padding:12px 8px 10px}.logo-box{height:56px}.btn-action-tech{font-size:12px;padding:7px 2px}}