:root { --ink:#20355d; --paper:#fffdf5; --cream:#fff5d5; --orange:#ff934f; --orange-dark:#e96c35; --blue:#58c9db; --yellow:#ffd55e; --pink:#fa8db4; --green:#8ed47d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans TC", sans-serif; }
.hero { min-height:690px; overflow:hidden; position:relative; isolation:isolate; background:linear-gradient(140deg,#80d9df 0%,#68ccd8 50%,#59bdd1 100%); }
.hero::after { content:""; position:absolute; z-index:-1; width:125%; height:170px; bottom:-88px; left:-12%; background:var(--cream); border-radius:50% 50% 0 0 / 58% 58% 0 0; transform:rotate(-3deg); }
.nav { width:min(1130px,90%); margin:auto; height:92px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; }
.brand { color:var(--paper); display:inline-flex; align-items:center; text-decoration:none; }.brand span{font-size:42px;line-height:1}.nav-link { color:var(--ink); text-decoration:none; font-weight:700; border-bottom:2px solid var(--ink); padding-bottom:4px; }.nav-link span{font-size:20px;display:inline-block;transform:rotate(-45deg)}
.hero-content { width:min(1130px,90%); margin:62px auto 0; position:relative; z-index:2; }.eyebrow { margin:0 0 9px; font:700 14px "Baloo 2",sans-serif; letter-spacing:2px; color:var(--orange-dark); }.hero .eyebrow{color:#fff9e8}.hero h1 { max-width:620px; font:800 clamp(48px,5.4vw,72px)/.97 "Baloo 2",sans-serif; margin:0; letter-spacing:-1px; }.hero h1 em { color:#fff9e8; font-style:normal; }.hero-copy { max-width:510px; margin:22px 0 26px; color:#fffdf5; line-height:1.9; font-weight:500; }.primary-button { display:inline-flex; align-items:center; gap:22px; padding:13px 20px 13px 25px; background:var(--orange); border:3px solid var(--ink); border-radius:99px; color:var(--ink); box-shadow:4px 5px 0 var(--ink); font-weight:900; text-decoration:none; transition:.18s transform,.18s box-shadow; }.primary-button:hover{transform:translate(3px,3px);box-shadow:1px 2px 0 var(--ink)}.primary-button span{font-size:24px;line-height:15px}
.cloud { position:absolute; background:#dcf7f3; opacity:.84; border-radius:100px; width:145px; height:30px; }.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud::before{width:62px;height:62px;bottom:0;left:25px}.cloud::after{width:42px;height:42px;bottom:0;right:20px}.cloud-one{top:122px;left:58%;transform:scale(.7)}.cloud-two{right:3%;top:280px;transform:scale(1.1)}
.mascot { position:absolute; width:252px; height:367px; left:calc(50% + 155px); top:166px; z-index:2; filter:drop-shadow(8px 9px 0 rgba(32,53,93,.18)); }.head{position:absolute;width:168px;height:152px;background:#ffc47d;border:4px solid var(--ink);border-radius:48% 48% 47% 47%;left:42px;top:42px;z-index:3}.cap{position:absolute;top:8px;left:35px;width:183px;height:78px;border:4px solid var(--ink);border-radius:90px 90px 25px 25px;background:var(--pink);z-index:4;transform:rotate(-5deg)}.cap::after{content:"";position:absolute;width:138px;height:25px;background:#f49abc;border:4px solid var(--ink);border-radius:50%;bottom:-15px;left:-20px;transform:rotate(-8deg)}.cap span{position:absolute;width:26px;height:30px;border-radius:50%;background:#ffe5a8;border:3px solid var(--ink);top:16px;left:75px}.eye{position:absolute;background:var(--ink);width:11px;height:18px;border-radius:50%;top:67px}.eye.left{left:49px}.eye.right{right:49px}.mouth{position:absolute;width:24px;height:14px;border-bottom:4px solid var(--ink);border-radius:0 0 40px 40px;left:67px;top:97px}.cheek{position:absolute;width:21px;height:10px;border-radius:50%;background:#f59a90;top:93px}.cheek.left{left:23px}.cheek.right{right:23px}.body{position:absolute;z-index:2;top:173px;left:31px;width:190px;height:130px;background:var(--yellow);border:4px solid var(--ink);border-radius:43% 43% 25px 25px}.shirt-number{font:800 53px "Baloo 2";text-align:center;margin-top:28px;color:#fff9e8;text-shadow:2px 2px var(--ink)}.arm{position:absolute;z-index:1;width:34px;height:105px;background:#ffc47d;border:4px solid var(--ink);border-radius:30px}.arm.left{top:190px;left:15px;transform:rotate(31deg)}.arm.right{top:193px;right:10px;transform:rotate(-31deg)}.leg{position:absolute;top:289px;width:47px;height:80px;background:#fff9e8;border:4px solid var(--ink);z-index:1}.leg.left{left:67px;transform:rotate(6deg)}.leg.right{right:65px;transform:rotate(-6deg)}.leg::after{content:"";position:absolute;background:var(--ink);height:18px;width:54px;bottom:-3px;border-radius:50% 80% 15px 35%}.leg.left::after{left:-10px}.leg.right::after{right:-10px}
.football{position:absolute;border:4px solid var(--ink);background:#fff9e8;border-radius:50%}.big-ball{width:94px;height:94px;left:calc(50% + 384px);top:430px;transform:rotate(18deg);z-index:3}.football span{position:absolute;left:29px;top:27px;width:31px;height:28px;background:var(--ink);clip-path:polygon(50% 0,100% 35%,82% 100%,18% 100%,0 35%)}.football b,.football i{position:absolute;border:3px solid var(--ink);border-radius:50%;width:26px;height:26px}.football b{left:-7px;top:21px}.football i{right:-7px;top:21px}.scroll-hint{position:absolute;bottom:55px;left:7%;color:#fff9e8;font:700 11px "Baloo 2";letter-spacing:2px}.scroll-hint span{font-size:18px;margin-left:8px}
.leagues-section { width:min(1050px,90%); margin:0 auto; padding:84px 0 86px; }.section-heading{text-align:center}.section-heading h2,.fun-section h2{font:800 clamp(32px,4vw,45px)/1.1 "Baloo 2";margin:0 0 12px}.section-heading>p:last-child{margin:0;color:#607291}.league-picker{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:35px 0 25px}.league-tab{background:transparent;border:0;border-radius:18px;padding:9px 15px;color:#607291;font:700 15px "Noto Sans TC";cursor:pointer;transition:.2s background,.2s transform}.league-tab:hover{transform:translateY(-2px)}.league-tab.active{background:#ffe8af;color:var(--ink)}.flag{font-size:23px;margin-right:7px;vertical-align:-3px}
.league-card { min-height:360px; border:4px solid var(--ink); border-radius:31px; background:#fff4d4; box-shadow:8px 9px 0 var(--ink); padding:38px 40px; position:relative; overflow:hidden; display:grid; grid-template-columns:116px minmax(280px,1.2fr) minmax(260px,.85fr); gap:25px; align-items:center; }.league-card::before{content:"";position:absolute;width:310px;height:310px;right:-80px;top:-160px;border-radius:50%;background:#ffe498}.league-mark{width:108px;height:108px;border:4px solid var(--ink);border-radius:35px 35px 45px 45px;background:#7953a1;color:#fff9e8;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-8deg);position:relative;z-index:1}.league-mark strong{font:800 43px "Baloo 2";line-height:.7}.crown{font-size:25px;line-height:25px}.league-title-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.country-name{margin:0;color:var(--orange-dark);font:700 13px "Baloo 2";letter-spacing:2px}.fun-badge{font-size:12px;background:var(--paper);border:2px solid var(--ink);border-radius:20px;padding:3px 8px}.league-info{position:relative;z-index:1}.league-info h3{font:700 14px "Baloo 2";margin:8px 0 0;color:#617190}.league-title{font:800 28px "Baloo 2";margin:2px 0 0}.english-name{font:500 17px "Baloo 2";color:#617190;margin:0 0 15px}.description{font-size:14px;line-height:1.8;margin:0}.facts{display:flex;gap:18px;margin-top:20px}.facts div{display:flex;flex-direction:column;border-left:3px solid var(--orange);padding-left:9px}.facts span{font-size:11px;color:#607291}.facts strong{font:700 15px "Baloo 2"}.stadium{position:relative;width:260px;height:185px;background:var(--green);border:4px solid var(--ink);border-radius:35px 35px 20px 20px;overflow:hidden;z-index:1;box-shadow:4px 5px 0 rgba(32,53,93,.22)}.stadium::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 42px,rgba(255,255,255,.10) 42px 84px)}.stands{position:absolute;left:-12px;width:286px;height:31px;background:#ed7da3;border:3px solid var(--ink);z-index:3}.stands.back{top:-8px;border-radius:5px}.stands.front{bottom:-12px;border-radius:40% 40% 0 0;background:#eaa2b7}.goal{position:absolute;width:35px;height:58px;top:57px;border:3px solid #fff9e8;z-index:2}.goal.left{left:0;border-left:0}.goal.right{right:0;border-right:0}.field-line{position:absolute;z-index:2;border-color:#fff9e8}.field-line.middle{height:100%;left:50%;border-left:3px solid}.field-line.circle{width:60px;height:60px;left:calc(50% - 30px);top:47px;border:3px solid;border-radius:50%}.pitch-ball{position:absolute;z-index:4;left:111px;top:75px;font-size:29px}.ball-doodle{position:absolute;left:108px;bottom:-26px;font-size:78px;transform:rotate(25deg);opacity:.22}
.fun-section{background:#ffd769;min-height:220px;padding:44px max(5%,calc((100% - 1050px)/2));display:flex;align-items:center;justify-content:space-between;gap:30px}.fun-section .eyebrow{color:var(--orange-dark)}.fun-section h2{font-size:38px}.fun-section p:last-child{max-width:610px;line-height:1.8;margin:0}.mini-fans{display:flex;align-items:end;font-size:56px;letter-spacing:-25px;min-width:160px}.mini-fans span:nth-child(even){transform:translateY(-13px)}footer{background:var(--ink);color:#e8f2f6;text-align:center;padding:19px;font:500 13px "Baloo 2";letter-spacing:1px}
@media (max-width:850px){.mascot{left:auto;right:4%;transform:scale(.78);transform-origin:top right}.big-ball{left:auto;right:1%;top:440px}.hero h1{max-width:54%;font-size:clamp(42px,6vw,55px)}.hero-copy{max-width:52%}.league-card{grid-template-columns:90px 1fr}.stadium{grid-column:1/-1;justify-self:center}.league-mark{width:85px;height:85px}.league-mark strong{font-size:34px}}
@media (max-width:600px){.hero{min-height:735px}.hero-content{margin-top:53px}.hero h1{max-width:none;font-size:52px}.hero-copy{max-width:none;font-size:14px}.mascot{top:380px;right:3%;transform:scale(.68)}.big-ball{top:559px;right:5%;transform:scale(.62)}.cloud-one{left:55%;top:116px}.cloud-two{display:none}.scroll-hint{bottom:38px}.leagues-section{padding:64px 0}.league-card{display:block;padding:28px 24px;box-shadow:5px 6px 0 var(--ink)}.league-mark{margin-bottom:17px}.league-title{font-size:25px}.facts{gap:10px;flex-wrap:wrap}.stadium{margin:28px auto 0;width:100%;max-width:260px}.fun-section{padding:36px 7%;display:block}.mini-fans{margin:18px 0 0}.nav-link{font-size:13px}.nav{height:78px}.brand span{font-size:38px}}