*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#08070b;color:#f5f0f8;font-family:"Noto Sans JP","Yu Gothic",sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.wrap{width:min(1180px,90vw);margin:auto}.nav{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid #7b368d66;background:#08070b66;backdrop-filter:blur(6px);letter-spacing:.12em;font-size:13px;position:relative;z-index:10}.nav .mark{font-weight:700}.navlinks{display:flex;gap:32px;color:#c9becd}.nav a{position:relative}.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-9px;height:1px;background:#be62cc;transition:right .35s ease}.nav a:hover:after,.nav a.active:after{right:0}.hero{min-height:100vh;background:linear-gradient(to bottom,rgba(7,5,10,.05),#08070b 96%),url('common/background.png') center top/cover no-repeat;position:relative}.heroInner{min-height:calc(100vh - 76px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px 100px;text-align:center}.logo{width:min(510px,72vw);filter:drop-shadow(0 0 20px #b2349a33)}.motto{font-size:clamp(19px,2vw,30px);font-weight:600;letter-spacing:.22em;margin:18px 0 58px}.next{width:min(880px,90vw);border-top:1px solid #8c3d9c;border-bottom:1px solid #8c3d9c;padding:25px 30px;display:grid;grid-template-columns:150px 1fr auto;align-items:center;text-align:left;background:#09070cb8}.eyebrow{font:700 11px Arial,sans-serif;letter-spacing:.25em;color:#ba6ac4}.eventTitle{font-size:clamp(20px,2vw,30px);letter-spacing:.1em}.eventMeta{color:#b9aebd;font-size:13px;margin-top:7px}.arrow{font:20px Arial;color:#d87adb}.section{padding:90px 0;border-top:1px solid #241628}.sectionHead{display:flex;align-items:end;justify-content:space-between;margin-bottom:38px}.sectionHead h2{margin:0;font:600 clamp(25px,3vw,42px) Arial,sans-serif;letter-spacing:.18em}.jp{font-size:12px;color:#9f8fa5;letter-spacing:.18em;margin-top:8px}.events{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#4a2650;border:1px solid #4a2650}.event{background:#0d0a10;padding:38px;min-height:230px;position:relative}.event.current:before{content:"NEXT";position:absolute;right:25px;top:25px;font:700 10px Arial;letter-spacing:.25em;color:#d46ee0}.season{font:700 12px Arial;letter-spacing:.24em;color:#a65db0}.event h3{font-size:27px;letter-spacing:.08em;margin:25px 0 14px}.event p{color:#a99dab;margin:6px 0}.event .go{position:absolute;bottom:30px;right:30px;color:#d77be0}.portalGrid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #4a2650;border-left:1px solid #4a2650}.portal{min-height:230px;padding:34px;border-right:1px solid #4a2650;border-bottom:1px solid #4a2650;background:linear-gradient(145deg,#100b13,#0a090c);position:relative}.portal .num{font:11px Arial;color:#7e537f}.portal h3{font:600 24px Arial;letter-spacing:.16em;margin:60px 0 7px}.portal p{margin:0;color:#9d919f;font-size:13px;line-height:1.8}.portal .go{position:absolute;right:25px;bottom:23px;color:#c96ed4}.official{display:flex;gap:0;border:1px solid #4a2650}.official a{flex:1;padding:27px 30px;border-right:1px solid #4a2650;font:600 15px Arial;letter-spacing:.16em}.official a:last-child{border:0}.footer{padding:50px 5vw;color:#706774;font-size:11px;letter-spacing:.14em;border-top:1px solid #241628}.top{min-height:58vh;background:linear-gradient(#09060c55,#08070b 96%),url('common/background.png') center 20%/cover;position:relative;background-position:center calc(20% + var(--parallax,0px))}.head{width:min(1160px,90vw);margin:auto;padding:100px 0 70px}.label{color:#b867c2;font:700 11px Arial;letter-spacing:.25em}.head h1{font-size:clamp(34px,5vw,65px);letter-spacing:.08em;margin:18px 0}.status{display:inline-block;border-left:2px solid #c761d2;padding:8px 15px;color:#c9bdcb}.grid{display:grid;grid-template-columns:2fr 1fr;gap:1px;background:#45224a;border:1px solid #45224a;margin-bottom:80px}.box{background:#0c0a0e;padding:34px}.box h2{font:600 18px Arial;letter-spacing:.18em;margin:0 0 28px}.row{display:grid;grid-template-columns:130px 1fr;padding:14px 0;border-top:1px solid #28202b;color:#b8acba}.row b{color:#f4eef6}.entry{display:block;margin-top:30px;border:1px solid #8f439b;padding:18px 20px;text-align:center;letter-spacing:.12em;position:relative;overflow:hidden;transition:border-color .3s ease,transform .3s ease}.entry.disabled{opacity:.45;pointer-events:none}.entry:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#9b47aa20,transparent);transform:translateX(-120%);transition:transform .6s ease}.entry:hover{border-color:#c766d4;transform:translateY(-2px)}.entry:hover:before{transform:translateX(120%)}.contentSection{padding:65px 0;border-top:1px solid #241628}.contentSection h2{font:600 28px Arial;letter-spacing:.18em;margin:0 0 32px}.placeholder{border-left:2px solid #7f398a;padding:20px 25px;color:#a99dab;line-height:1.9;background:#0c0a0e}.staffGrid,.playerGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#45224a;border:1px solid #45224a}.person,.player{background:#0c0a0e;padding:25px;transition:background .25s ease}.person:hover,.player:hover{background:#120d15}.person b,.player b{display:block;font-size:18px;margin-bottom:10px}.person span,.player span{color:#9d909f;font-size:12px;line-height:1.7}.results{border-top:1px solid #4a2650}.match{display:grid;grid-template-columns:150px 1fr 140px 170px;align-items:center;min-height:92px;border-bottom:1px solid #4a2650;position:relative;transition:background .25s ease}.match:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#a74db5;transform:scaleY(0);transform-origin:center;transition:transform .25s ease}.match:hover{background:#0d0a10}.match:hover:before{transform:scaleY(1)}.round{padding:0 22px;color:#9f8fa5;font:700 10px Arial;letter-spacing:.2em}.versus{padding:0 22px;font-size:17px;letter-spacing:.05em}.score{text-align:center;font:700 18px Arial;letter-spacing:.12em;color:#a99dab}.archive{justify-self:end;margin-right:18px;padding:12px 14px;border:1px solid #704078;font:700 10px Arial;letter-spacing:.16em;opacity:0;pointer-events:none;transform:translateX(8px);transition:opacity .3s ease,transform .3s ease,border-color .3s ease}.match.is-finished .archive{opacity:1;pointer-events:auto;transform:none}.match.is-finished .archive:hover{border-color:#c766d4}.match.is-finished .score{color:#f4eef6}.resultNote{margin-top:18px;color:#807583;font-size:12px;line-height:1.8}.pageLead{max-width:760px;color:#b8acba;line-height:2;margin:0 0 45px}.listRows{border-top:1px solid #4a2650}.listRow{display:grid;grid-template-columns:160px 1fr auto;gap:20px;padding:24px 18px;border-bottom:1px solid #4a2650;align-items:center}.listRow .meta{color:#9f8fa5;font:700 10px Arial;letter-spacing:.18em}.listRow h3{margin:0 0 8px;font-size:20px}.listRow p{margin:0;color:#9d909f}.rulesLayout{display:grid;grid-template-columns:220px 1fr;gap:70px}.rulesNav{position:sticky;top:30px;align-self:start}.rulesNav a{display:block;padding:10px 0;color:#9d909f;font-size:12px;letter-spacing:.08em}.ruleBlock{padding:0 0 50px;margin-bottom:50px;border-bottom:1px solid #2b1b2f}.ruleBlock h2{font-size:24px;letter-spacing:.12em}.ruleBlock p{color:#b4a7b7;line-height:2}.staffDetail{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#45224a;border:1px solid #45224a}.staffCard{background:#0c0a0e;padding:30px;min-height:210px}.staffCard h3{font-size:22px;margin:0 0 10px}.staffCard .role{color:#c96ed4;font-size:12px;letter-spacing:.08em}.staffCard p{color:#9d909f;line-height:1.8;font-size:13px}.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}.chip{border:1px solid #4a2650;padding:5px 8px;color:#9d909f;font-size:10px}.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}.heroInner .logo,.heroInner .motto,.heroInner .next,.head .label,.head h1,.head .status{opacity:0;transform:translateY(18px);animation:heroIn .75s cubic-bezier(.2,.7,.2,1) forwards}.heroInner .motto,.head h1{animation-delay:.12s}.heroInner .next,.head .status{animation-delay:.24s}.event,.portal,.official a{transition:background .25s ease,transform .25s ease,border-color .25s ease}.event:hover,.portal:hover{background:#120d15}.event .go,.portal .go{transition:transform .25s ease}.event:hover .go,.portal:hover .go{transform:translateX(5px)}.official a:hover{background:#100c12}@keyframes heroIn{to{opacity:1;transform:none}}@media(max-width:760px){.navlinks{gap:13px;font-size:10px}.motto{letter-spacing:.08em}.next{grid-template-columns:1fr auto;gap:8px}.next .eyebrow{grid-column:1/3}.events,.portalGrid,.grid,.staffGrid,.playerGrid,.staffDetail,.rulesLayout{grid-template-columns:1fr}.official{flex-direction:column}.official a{border-right:0;border-bottom:1px solid #4a2650}.row{grid-template-columns:1fr;gap:5px}.match{grid-template-columns:1fr auto;padding:18px 0}.round,.versus{padding:4px 18px}.round{grid-column:1/3}.score{padding-right:18px}.archive{grid-column:1/3;justify-self:start;margin:10px 18px 0}.match:not(.is-finished) .archive{display:none}.listRow{grid-template-columns:1fr}.rulesNav{position:static}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.heroInner .logo,.heroInner .motto,.heroInner .next,.head .label,.head h1,.head .status,.reveal{opacity:1!important;transform:none!important}}
.person{position:relative;display:block}.person i{position:absolute;right:18px;bottom:16px;font:700 9px Arial;letter-spacing:.16em;color:#805f85;font-style:normal;transition:color .25s ease,transform .25s ease}.person:hover i{color:#d77be0;transform:translateX(3px)}
.player{position:relative;min-height:120px}.player.mainEventPlayer{background:linear-gradient(135deg,#130d16,#0c0a0e)}.player.mainEventPlayer:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#c45bd1}.player em{display:block;margin-bottom:15px;font:700 9px Arial;letter-spacing:.18em;color:#c96ed4;font-style:normal}
.staffCard{display:block;color:inherit;position:relative;transition:background .25s ease}.staffCard:hover{background:#120d15}.staffCardTop{display:flex;justify-content:space-between;margin-bottom:28px}.staffNo{font:700 10px Arial;letter-spacing:.18em;color:#68496c}.staffOpen{font:700 9px Arial;letter-spacing:.14em;color:#875b8c;transition:transform .25s ease,color .25s ease}.staffCard:hover .staffOpen{color:#d77be0;transform:translateX(3px)}
.staffProfilePage{height:100vh;overflow:hidden;background:#08070b}.staffProfilePage .nav{background:#08070bd9}.staffProfileShell{height:calc(100vh - 76px);min-height:620px;background:linear-gradient(90deg,#08070bf2 0%,#08070bd8 49%,#08070b35 72%,#08070b 100%),url('common/background.png') center/cover no-repeat}.staffProfileInner{width:min(1320px,92vw);height:100%;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,46%);gap:50px;align-items:stretch}.staffProfileCopy{padding:54px 0 36px;display:flex;flex-direction:column;justify-content:center;min-width:0}.backLink{align-self:flex-start;margin-bottom:30px;font:700 10px Arial;letter-spacing:.18em;color:#8f7d92}.staffProfileCopy h1{margin:10px 0 6px;font-size:clamp(44px,5.4vw,78px);letter-spacing:.06em}.staffProfileRole{margin:0 0 24px;color:#d073dc;font-size:14px;letter-spacing:.08em}.staffMessage{max-width:700px;margin:0 0 26px;color:#c3b6c6;line-height:1.9;font-size:14px}.staffMetaGrid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #402245;border-bottom:1px solid #402245;margin-bottom:22px}.staffMetaGrid>div{padding:14px 18px 14px 0}.staffMetaGrid>div+div{border-left:1px solid #402245;padding-left:18px}.staffMetaGrid span{display:block;font:700 9px Arial;letter-spacing:.16em;color:#715b75;margin-bottom:6px}.staffMetaGrid b{font-size:13px;font-weight:600}.staffWorkTitle{font:700 10px Arial;letter-spacing:.18em;color:#b45fc0;margin-bottom:7px}.staffWorkRow{display:grid;grid-template-columns:88px 1fr auto;gap:14px;align-items:center;border-top:1px solid #2c1b30;padding:10px 2px;min-height:42px}.staffWorkRow:last-child{border-bottom:1px solid #2c1b30}.staffWorkRow span{font:700 10px Arial;letter-spacing:.1em;color:#857589}.staffWorkRow b{font-size:12px;font-weight:500;color:#cfc4d1}.staffWorkRow i{font-style:normal;color:#8e5495}.staffLinks{display:flex;gap:12px;margin-top:22px}.staffLinks a{border-bottom:1px solid #8f439b;padding:7px 0;font:700 10px Arial;letter-spacing:.16em;color:#d177db}.staffVisual{position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.staffVisual:before{content:"";position:absolute;left:5%;right:5%;bottom:8%;height:1px;background:linear-gradient(90deg,transparent,#8a3e94,transparent)}.staffVisualFrame{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;position:relative}.staffVisualFrame img{max-height:94%;max-width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 24px #8c3d9c32);animation:staffImageIn .75s cubic-bezier(.2,.7,.2,1) both}.staffImagePlaceholder{width:74%;height:78%;margin-bottom:6%;border-left:1px solid #7e3a87;border-right:1px solid #321936;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#2a163044,#0b090d22);color:#755779;letter-spacing:.12em;text-align:center}.staffImagePlaceholder span{font:700 12px Arial;letter-spacing:.18em}.staffImagePlaceholder small{margin-top:10px;color:#5e4d61;font-size:10px;letter-spacing:.05em}.staffIndex{position:absolute;right:0;bottom:28px;font:700 10px Arial;letter-spacing:.22em;color:#725377}@keyframes staffImageIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media(max-width:900px){.staffProfilePage{height:auto;overflow:auto}.staffProfileShell{height:auto;min-height:calc(100vh - 76px)}.staffProfileInner{grid-template-columns:1fr}.staffProfileCopy{padding-bottom:10px}.staffVisual{height:64vh;min-height:420px}.staffVisualFrame img{max-height:100%}.staffImagePlaceholder{height:88%}}
.scheduleList{border-top:1px solid #4a2650}.scheduleRow{display:grid;grid-template-columns:100px 170px 1fr;align-items:center;min-height:66px;border-bottom:1px solid #342038;padding:0 18px}.scheduleDate{font:700 11px Arial;letter-spacing:.16em;color:#c86bd3}.scheduleTime{font:700 12px Arial;letter-spacing:.12em;color:#96899a}.scheduleRow b{font-size:14px;letter-spacing:.06em}.formatList{border-top:1px solid #4a2650}.formatRow{display:grid;grid-template-columns:70px 1fr;border-bottom:1px solid #342038;min-height:62px;align-items:center}.formatRow span{padding-left:18px;color:#89518e;font:700 10px Arial;letter-spacing:.16em}.formatRow p{margin:0;padding:17px 18px;border-left:1px solid #342038;color:#c1b5c3;line-height:1.7;font-size:13px}.formatMore{margin-top:16px;color:#786e7b;font-size:11px;letter-spacing:.08em}.formatMore a{color:#d477df}.match.is-finished:not(.has-archive) .archive{opacity:.55;pointer-events:none;transform:none}.archivePending{border-color:#3e3041;color:#766a79}.playerGrid{align-items:stretch}.player span{word-break:break-word}@media(max-width:760px){.scheduleRow{grid-template-columns:70px 1fr;gap:4px;padding:12px 14px}.scheduleTime{grid-column:2}.scheduleRow b{grid-column:1/3;margin-top:4px}.formatRow{grid-template-columns:44px 1fr}}
.staffProfileChips{margin:18px 0 6px}.staffProfileChips .chip{display:inline-block}
/* Image convention: staff = assets/staff/{staff id}.png, players = assets/players/{MCID}.png */
.player{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:12px;overflow:hidden;align-items:end}
.playerCopy{min-width:0;position:relative;z-index:1}
.playerImage{width:82px;height:112px;object-fit:contain;object-position:center bottom;justify-self:end;align-self:end;filter:drop-shadow(0 0 12px #8c3d9c2b)}
.playerLinks{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.playerLinks a{border:1px solid #5d3264;padding:6px 8px;color:#d995e1;font:700 9px Arial,sans-serif;letter-spacing:.1em;transition:background .2s ease,border-color .2s ease,color .2s ease}.playerLinks a:hover{background:#1b1020;border-color:#c766d4;color:#fff}
/* TOP story: explain the summit before linking to individual pages. */
.summitStory{padding:120px 0 56px;border-top:1px solid #3d2043;background:linear-gradient(180deg,#100813 0%,#08070b 26%,#08070b 100%)}
.storyRow{display:grid;grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);gap:clamp(52px,7vw,100px);align-items:center;padding:0 0 116px}
.storyRowReverse{grid-template-columns:minmax(420px,1.12fr) minmax(0,.88fr)}
.storyRowReverse .storyCopy{order:2}.storyRowReverse .storyVisual{order:1}
.storyCopy{position:relative;z-index:1}.storyCopy .eyebrow{display:inline-block;border-left:3px solid var(--champ);padding-left:12px;margin-bottom:22px}
.storyCopy h2{margin:0 0 28px;font:900 clamp(38px,4.5vw,66px)/1.03 Arial,"Noto Sans JP",sans-serif;letter-spacing:-.035em}.storyCopy h2 span{color:#d86fe3}
.storyCopy p{margin:0 0 17px;color:#b8acba;font-size:14px;line-height:2.05;letter-spacing:.035em}
.storyLink{display:inline-block;margin-top:18px;padding:12px 0;border-bottom:1px solid #7c3c84;color:#dc84e6;font:700 11px Arial,"Noto Sans JP",sans-serif;letter-spacing:.12em;transition:color .2s,border-color .2s,transform .2s}.storyLink:hover{color:#fff;border-color:#d86fe3;transform:translateX(4px)}
.storyVisual{position:relative;margin:0;min-height:410px;overflow:hidden;background:#100b13;border-top:1px solid #8d4396;border-bottom:1px solid #3b203f}
.storyVisual::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#08070b18,#b54bc118 60%,#08070b82)}
.storyVisual img{display:block;width:100%;height:100%;min-height:410px;object-fit:cover;filter:saturate(.78) contrast(1.08) brightness(.72);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s}
.storyRow:hover .storyVisual img{transform:scale(1.025);filter:saturate(.92) contrast(1.08) brightness(.8)}
.storyVisual figcaption{position:absolute;z-index:2;left:22px;right:22px;bottom:19px;display:flex;align-items:center;gap:13px;color:#eee5f0;font:800 10px Arial,sans-serif;letter-spacing:.2em}.storyVisual figcaption span{color:#df77e9}
.storyEventMeta{display:flex;flex-wrap:wrap;gap:9px;margin:-8px 0 25px}.storyEventMeta span{border:1px solid #58305f;padding:7px 10px;color:#c99acf;font:700 10px Arial,"Noto Sans JP",sans-serif;letter-spacing:.12em}
.storyEventVisual{isolation:isolate}.storyEventVisual>.storyEventLogo{position:absolute;z-index:2;left:50%;top:50%;width:min(62%,390px);height:auto;min-height:0;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 12px 35px #050306cc);opacity:.92}.storyRow:hover .storyEventVisual>.storyEventLogo{transform:translate(-50%,-50%) scale(1.025);filter:drop-shadow(0 12px 35px #050306cc)}
.staffStoryVisual{background:radial-gradient(circle at 50% 35%,#321638 0%,#140b17 52%,#09070b 100%);isolation:isolate}.staffStoryVisual::before{content:"STAFF";position:absolute;z-index:0;left:50%;top:46%;transform:translate(-50%,-50%);color:#e274ed0c;font:900 110px Arial,sans-serif;letter-spacing:-.04em}.staffMontage{position:absolute;z-index:1;inset:20px 18px 0;display:flex;align-items:end;justify-content:center;overflow:hidden}.staffMontage img{display:block;width:25%;height:92%;min-height:0;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 18px #8e3e9633);margin:0 -2.7%;transition:transform .45s ease,filter .45s ease}.staffMontage img:nth-child(1),.staffMontage img:nth-child(5){height:76%;opacity:.72}.staffMontage img:nth-child(2),.staffMontage img:nth-child(4){height:85%;opacity:.86}.storyRow:hover .staffMontage img{transform:translateY(-5px);filter:drop-shadow(0 0 24px #c55bd14d)}
.homeStaffLead{margin:-8px 0 34px;color:#998d9c;font-size:13px;letter-spacing:.04em}.homeStaffGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#4a2650}.homeStaffCard{min-width:0;background:#0c0a0e;transition:background .25s ease,transform .25s ease}.homeStaffCard:hover{background:#140e17;transform:translateY(-3px)}.homeStaffImage{height:170px;overflow:hidden;background:radial-gradient(circle at 50% 70%,#321638,#0d0910 68%);border-bottom:1px solid #342038}.homeStaffImage img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 14px #9d47a833)}.homeStaffCopy{position:relative;min-height:122px;padding:20px 18px}.homeStaffCopy b{display:block;margin-bottom:8px;font-size:17px}.homeStaffCopy span{display:block;color:#a396a6;font-size:11px;line-height:1.6}.homeStaffCopy i{position:absolute;left:18px;bottom:17px;color:#ce70d8;font:700 9px Arial,sans-serif;letter-spacing:.14em;font-style:normal}
.rulesTabs{display:flex;gap:1px;margin:0 0 34px;border-bottom:1px solid #5d2f64}.rulesTabs button{appearance:none;border:0;border-top:1px solid #352039;background:#0d0a10;color:#8f8392;padding:17px 24px;min-width:180px;text-align:left;cursor:pointer;font:700 12px Arial,"Noto Sans JP",sans-serif;letter-spacing:.12em;transition:background .2s,color .2s,border-color .2s}.rulesTabs button span{margin-right:12px;color:#78437e;font-size:9px}.rulesTabs button:hover,.rulesTabs button.active{background:#160e19;color:#f5f0f8;border-top-color:#ca5fd5}.rulesTabs button.active span{color:#dc76e6}.rulesTabs button:focus-visible{outline:2px solid #d66ee1;outline-offset:2px}
@media(max-width:900px){.summitStory{padding-top:82px}.storyRow,.storyRowReverse{grid-template-columns:1fr;gap:32px;padding-bottom:82px}.storyRowReverse .storyCopy,.storyRowReverse .storyVisual{order:initial}.storyVisual,.storyVisual img{min-height:320px}.storyCopy{max-width:680px}}
@media(max-width:1000px){.homeStaffGrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.summitStory{padding-top:68px}.storyRow,.storyRowReverse{padding-bottom:68px}.storyCopy h2{font-size:clamp(34px,12vw,49px)}.storyCopy p{font-size:13px;line-height:1.95}.storyVisual,.storyVisual img{min-height:250px}.storyVisual figcaption{left:16px;bottom:14px}.homeStaffGrid{grid-template-columns:repeat(2,1fr)}.homeStaffImage{height:145px}.homeStaffCopy{min-height:116px;padding:17px 14px}.homeStaffCopy i{left:14px}.rulesTabs{overflow-x:auto}.rulesTabs button{min-width:150px;padding:15px 18px}}
@media(max-width:760px){.player{grid-template-columns:minmax(0,1fr) 86px}.playerImage{width:90px;height:122px}}
/* ===== CHAMPIONSHIP EDITION ===== */
:root{--champ:#c45bd1;--champ2:#e17bea;--line:#5a2b61;--panel:#0d0a10}
body{background:#070609}
.nav{height:72px;background:#070609d9;border-bottom:1px solid #65316c;backdrop-filter:blur(10px)}
.nav .mark{font:800 12px Arial,sans-serif;letter-spacing:.16em}.navlinks{font:700 11px Arial,sans-serif;letter-spacing:.16em}
.champHero{min-height:760px;height:min(900px,100vh);background:linear-gradient(90deg,#070609 0%,#08060bde 43%,#08060b72 68%,#070609 100%),url('common/background.png') center/cover no-repeat;overflow:hidden}
.champHeroInner{height:calc(100% - 72px);position:relative;display:flex;align-items:center}.champCopy{position:relative;z-index:3;width:min(720px,72%);padding-bottom:20px}.champKicker{border-left:3px solid var(--champ);padding-left:14px;color:#d979e4;font:800 11px Arial,sans-serif;letter-spacing:.3em}.champLogoWord{font:900 clamp(60px,8.2vw,116px)/.82 Arial,sans-serif;letter-spacing:-.055em;margin:28px 0 20px;color:#f7f2f8}.champLogoWord span{color:#d96fe4}.champHome .motto{font-size:clamp(14px,1.45vw,21px);font-weight:600;letter-spacing:.14em;margin:0 0 38px;color:#c9bdcc}.champNext{width:min(650px,100%);grid-template-columns:120px 1fr auto;margin:0;padding:16px 2px;background:transparent;border-color:#75407c}.champNext .eventTitle{font-size:clamp(16px,1.6vw,22px)}.champLogo{position:absolute;z-index:1;right:-3%;top:50%;transform:translateY(-50%);width:min(610px,48vw);opacity:.38;filter:drop-shadow(0 0 70px #c057cd30)}.champGhost{position:absolute;right:-2vw;bottom:-8vw;font:900 25vw/.8 Arial,sans-serif;letter-spacing:-.08em;color:#b957c908;z-index:0;pointer-events:none}.champTicker{background:var(--champ);color:#09060a;white-space:nowrap;overflow:hidden;padding:11px 0;font:900 10px Arial,sans-serif;letter-spacing:.22em}.champTicker span{display:inline-block;margin-right:64px}.champSectionHead{border-bottom:1px solid var(--line);padding-bottom:16px}.champSectionHead h2{font-size:clamp(38px,4.5vw,58px);letter-spacing:.04em;margin-top:6px}.section{padding:84px 0}.events{gap:28px;background:transparent;border:0}.event{min-height:270px;border-left:1px solid #74377d;background:linear-gradient(120deg,#130d16cc,#08070b66);padding:32px}.event.current:before{top:30px}.event:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,#a54db2,transparent)}.event h3{margin-top:62px;font-size:30px}.portalGrid{border:0;gap:1px;background:#4a2650}.portal{min-height:250px}.official{border-left:0;border-right:0}.top{min-height:48vh;background:linear-gradient(90deg,#070609ed,#08070b9c 60%,#08070b),url('common/background.png') center 25%/cover}.head{padding:86px 0 60px;position:relative}.head:after{content:attr(data-ghost);position:absolute;right:0;bottom:-18px;font:900 120px Arial;color:#b957c90b;letter-spacing:-.05em;pointer-events:none}.head h1{font:900 clamp(50px,7vw,86px)/.9 Arial,sans-serif;letter-spacing:-.035em;margin:20px 0}.head .label{border-left:3px solid var(--champ);padding-left:13px}.status{border-left:0;border-top:1px solid #7a3b82;border-bottom:1px solid #7a3b82;padding:9px 1px;color:#cbbdce;letter-spacing:.08em}.contentSection{padding:76px 0}.pageLead{border-left:1px solid #67306f;padding-left:24px}.listRows{border-color:#67306f}.listRow{min-height:112px;padding:24px 8px;border-color:#3e2443;transition:background .2s,padding .2s}.listRow:hover{background:#0e0a11;padding-left:18px}.listRow h3{font-size:24px}.listRow .arrow{font-size:22px}.staffDetail{grid-template-columns:repeat(3,1fr);background:transparent;border:0;gap:18px}.staffCard{border-left:1px solid #6d3375;background:linear-gradient(130deg,#100b13,#09080b);min-height:235px}.staffCard:hover{background:#140e17}.staffCard h3{font-size:27px;margin-top:34px}.staffCard:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,#8c4297,transparent)}.grid{background:transparent;border:0;gap:20px}.box{border-left:1px solid #6d3375;background:#0c090e}.contentSection h2{font-size:34px;letter-spacing:.1em}.scheduleList,.formatList,.results{border-color:#64306c}.scheduleRow,.formatRow,.match{border-color:#36203a}.match{min-height:98px}.match:hover{background:#100b13}.staffGrid,.playerGrid{background:transparent;border:0;gap:1px}.person,.player{border-bottom:1px solid #3c2241}.player.mainEventPlayer{border-left:2px solid var(--champ)}.rulesLayout{gap:90px}.ruleBlock h2{font-size:29px}.staffProfileShell{background:linear-gradient(90deg,#070609f7 0%,#070609df 47%,#07060942 73%,#070609 100%),url('common/background.png') center/cover no-repeat}.staffProfileCopy h1{font:900 clamp(48px,6vw,84px)/.95 Arial,"Noto Sans JP",sans-serif;letter-spacing:.02em}.staffVisualFrame img{filter:drop-shadow(0 0 34px #a54db23b)}
@media(max-width:760px){.champHero{min-height:720px;height:auto}.champHeroInner{min-height:650px}.champCopy{width:100%}.champLogoWord{font-size:clamp(52px,18vw,80px)}.champLogo{width:90vw;right:-40vw;opacity:.22}.champHome .motto{letter-spacing:.06em;max-width:78%}.champNext{grid-template-columns:1fr auto}.champNext .eyebrow{grid-column:1/3}.events{grid-template-columns:1fr;gap:16px}.staffDetail{grid-template-columns:1fr}.head:after{font-size:70px}.nav{padding:0 4vw}.navlinks{gap:11px;font-size:9px}}
/* ===== CHAMPIONSHIP v2 : Japanese brand + moving ticker + motto backdrop ===== */
.champLogoJP{
font-family:"Noto Sans JP","Yu Gothic",Arial,sans-serif;
font-weight:900;
font-size:clamp(48px,6.7vw,94px);
line-height:.98;
letter-spacing:-.045em;
margin:30px 0 22px;
white-space:nowrap;
}
.champLogoJP span{color:#d96fe4;letter-spacing:-.055em}
.champMotto{font-size:clamp(13px,1.25vw,18px)!important;opacity:.72;margin-bottom:34px!important}
.champGhostMotto{
right:auto;
left:18vw;
top:0%;
bottom:auto;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:-.04em;
font-family:"Noto Sans JP","Yu Gothic",sans-serif;
font-weight:900;
font-size:clamp(108px,14.6vw,260px);
line-height:.79;
letter-spacing:-.09em;
color:#e278ec0c;
transform:rotate(-3deg);
white-space:nowrap;
}
.champGhostMotto span:nth-child(1){margin-left:0}
.champGhostMotto span:nth-child(2){margin-left:6vw}
.champGhostMotto span:nth-child(3){
margin-left:12vw;
font-size:.76em;
letter-spacing:-.085em;
}
.champTicker{padding:0;position:relative;overflow:hidden}
.champTickerTrack{
display:flex;
width:max-content;
animation:champTickerScroll 36s linear infinite;
will-change:transform;
}
.champTickerGroup{display:flex;align-items:center;flex-shrink:0;padding:11px 0}
.champTickerGroup span{display:inline-block;margin:0 62px 0 0;white-space:nowrap}
.champTickerGroup span:after{content:"◆";margin-left:62px;font-size:.72em}
@keyframes champTickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:760px){
.champLogoJP{font-size:clamp(43px,14.2vw,66px);white-space:normal}
.champGhostMotto{left:-2vw;top:8%;font-size:clamp(74px,22vw,126px);opacity:.78}
.champGhostMotto span:nth-child(2){margin-left:4vw}
.champGhostMotto span:nth-child(3){margin-left:7vw;font-size:.72em}
.champMotto{max-width:100%!important}
}
@media(prefers-reduced-motion:reduce){.champTickerTrack{animation:none!important}}
/* ===== CHAMPIONSHIP v5 : Minecraft hero background ===== */
.champHero{
position:relative;
isolation:isolate;
background:
linear-gradient(90deg,rgba(7,6,9,.90) 0%,rgba(8,6,11,.67) 38%,rgba(8,6,11,.32) 68%,rgba(7,6,9,.72) 100%),
url('common/minecraft-hero.png') center 46%/cover no-repeat;
}
.champHero::after{
content:"";
position:absolute;
z-index:1;
pointer-events:none;
left:0; right:0; bottom:0;
height:48%;
background:linear-gradient(to bottom,
rgba(18,8,25,0) 0%,
rgba(20,8,29,.18) 25%,
rgba(25,9,35,.62) 68%,
#16091f 100%);
}
.champHeroInner{z-index:2}
.champHero .nav{position:relative;z-index:5}
.champGhostMotto{z-index:0;color:#f3c6f414}
.champLogo{opacity:.24}
.champTicker{position:relative;z-index:6}
.champHome main{
background:linear-gradient(to bottom,#16091f 0,#100813 180px,#070609 520px);
}
@media(max-width:760px){
.champHero{
background:
linear-gradient(90deg,rgba(7,6,9,.82),rgba(8,6,11,.46),rgba(7,6,9,.76)),
url('common/minecraft-hero.png') 58% center/cover no-repeat;
}
.champHero::after{height:55%}
}
/* ===== CHAMPIONSHIP v7 : halftone transition ===== */
.champTicker{
display:none !important;
}
/*
Halftone / dot-screen transition:
tiny dark dots begin around the lower-middle of the Minecraft hero,
grow denser/larger toward the bottom, then merge into the deep purple content.
*/
.champHero::after{
content:"";
position:absolute;
z-index:1;
pointer-events:none;
left:0;
right:0;
bottom:-1px;
height:58%;
background:
radial-gradient(circle,
rgba(20,8,29,.98) 0 18%,
rgba(20,8,29,0) 20% 100%) 0 0 / 9px 9px,
linear-gradient(to bottom,
rgba(20,8,29,0) 0%,
rgba(20,8,29,.08) 18%,
rgba(20,8,29,.28) 45%,
rgba(20,8,29,.72) 76%,
#16091f 100%);
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 12%,#000 100%);
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 12%,#000 100%);
}
/* A second dot layer uses larger dots near the bottom, producing the
"small dots above -> large dots below" comic/halftone effect. */
.champHero::before{
content:"";
position:absolute;
z-index:1;
pointer-events:none;
left:0;
right:0;
bottom:-1px;
height:34%;
background:
radial-gradient(circle,
#16091f 0 36%,
transparent 38% 100%) 0 0 / 17px 17px;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.45) 26%,#000 86%);
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.45) 26%,#000 86%);
}
.champHome main{
position:relative;
background:#16091f;
}
.champHome main::before{
content:"";
display:block;
position:absolute;
left:0;
right:0;
top:0;
height:220px;
pointer-events:none;
background:linear-gradient(to bottom,#16091f 0%,#100813 58%,#070609 100%);
z-index:0;
}
.champHome main > *{
position:relative;
z-index:1;
}
@media(max-width:760px){
.champHero::after{
height:62%;
background:
radial-gradient(circle,rgba(20,8,29,.98) 0 18%,rgba(20,8,29,0) 20% 100%) 0 0 / 7px 7px,
linear-gradient(to bottom,rgba(20,8,29,0),rgba(20,8,29,.32) 50%,#16091f 100%);
}
.champHero::before{
height:38%;
background:
radial-gradient(circle,#16091f 0 36%,transparent 38% 100%) 0 0 / 13px 13px;
}
}
/* ===== CHAMPIONSHIP v8 : short diagonal halftone transition ===== */
.champHero::after{
left:-3%;
right:-3%;
bottom:-1px;
height:25% !important;
background:
radial-gradient(circle,rgba(20,8,29,.98) 0 19%,transparent 21% 100%) 0 0 / 10px 10px,
radial-gradient(circle,rgba(20,8,29,.98) 0 19%,transparent 21% 100%) 5px 5px / 10px 10px,
linear-gradient(155deg,
rgba(20,8,29,0) 0%,
rgba(20,8,29,.06) 24%,
rgba(20,8,29,.45) 63%,
#16091f 100%);
transform:skewY(-2.2deg);
transform-origin:right bottom;
-webkit-mask-image:linear-gradient(155deg,transparent 0%,rgba(0,0,0,.22) 28%,#000 78%);
mask-image:linear-gradient(155deg,transparent 0%,rgba(0,0,0,.22) 28%,#000 78%);
}
.champHero::before{
left:-3%;
right:-3%;
bottom:-1px;
height:14% !important;
background:
radial-gradient(circle,#16091f 0 37%,transparent 39% 100%) 0 0 / 18px 18px,
radial-gradient(circle,#16091f 0 37%,transparent 39% 100%) 9px 9px / 18px 18px;
transform:skewY(-2.2deg);
transform-origin:right bottom;
-webkit-mask-image:linear-gradient(155deg,transparent 0%,rgba(0,0,0,.55) 25%,#000 82%);
mask-image:linear-gradient(155deg,transparent 0%,rgba(0,0,0,.55) 25%,#000 82%);
}
@media(max-width:760px){
.champHero::after{
height:28% !important;
background:
radial-gradient(circle,rgba(20,8,29,.98) 0 19%,transparent 21% 100%) 0 0 / 8px 8px,
radial-gradient(circle,rgba(20,8,29,.98) 0 19%,transparent 21% 100%) 4px 4px / 8px 8px,
linear-gradient(155deg,rgba(20,8,29,0),rgba(20,8,29,.4) 62%,#16091f);
}
.champHero::before{
height:16% !important;
background:
radial-gradient(circle,#16091f 0 37%,transparent 39% 100%) 0 0 / 14px 14px,
radial-gradient(circle,#16091f 0 37%,transparent 39% 100%) 7px 7px / 14px 14px;
}
}
/* ===== CHAMPIONSHIP v9 : horizontal boundary, staggered dots retained ===== */
.champHero::after,
.champHero::before{
left:0 !important;
right:0 !important;
transform:none !important;
transform-origin:initial !important;
}
.champHero::after{
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.22) 28%,#000 78%) !important;
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.22) 28%,#000 78%) !important;
}
.champHero::before{
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.55) 25%,#000 82%) !important;
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.55) 25%,#000 82%) !important;
}
/* ===== CHAMPIONSHIP v10 : longer halftone + seamless purple/black blend ===== */
/* Roughly double the v9 halftone depth while keeping the boundary horizontal
and the dots staggered. */
.champHero::after{
height:46% !important;
background:
radial-gradient(circle,rgba(20,8,29,.98) 0 19%,transparent 21% 100%) 0 0 / 10px 10px,
radial-gradient(circle,rgba(20,8,29,.98) 0 19%,transparent 21% 100%) 5px 5px / 10px 10px,
linear-gradient(to bottom,
rgba(20,8,29,0) 0%,
rgba(20,8,29,.05) 20%,
rgba(20,8,29,.22) 48%,
rgba(20,8,29,.62) 76%,
#16091f 100%) !important;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.16) 18%,rgba(0,0,0,.72) 62%,#000 100%) !important;
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.16) 18%,rgba(0,0,0,.72) 62%,#000 100%) !important;
}
.champHero::before{
height:27% !important;
background:
radial-gradient(circle,#16091f 0 37%,transparent 39% 100%) 0 0 / 18px 18px,
radial-gradient(circle,#16091f 0 37%,transparent 39% 100%) 9px 9px / 18px 18px !important;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.30) 18%,rgba(0,0,0,.78) 65%,#000 100%) !important;
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.30) 18%,rgba(0,0,0,.78) 65%,#000 100%) !important;
}
/* Remove the hard purple -> black step after the hero.
Keep the exact hero-bottom purple first, then fade very gradually. */
.champHome main{
background:
linear-gradient(to bottom,
#16091f 0px,
#16091f 110px,
#14091c 210px,
#110815 340px,
#0d0710 500px,
#09060b 680px,
#070609 820px) !important;
}
.champHome main::before{
height:820px !important;
background:
linear-gradient(to bottom,
#16091f 0%,
rgba(22,9,31,.96) 12%,
rgba(17,8,21,.82) 38%,
rgba(13,7,16,.58) 62%,
rgba(7,6,9,0) 100%) !important;
}
@media(max-width:760px){
.champHero::after{height:50% !important}
.champHero::before{height:30% !important}
.champHome main::before{height:650px !important}
}
/* CHAMPIONSHIP v11: stronger logo + line hierarchy */
.champLogoWord{display:none!important}
.champCopy{width:min(690px,66%)!important}
.champKicker{margin-bottom:34px;border-left:6px solid var(--champ)!important;padding-left:16px!important}
.champLogo{z-index:3!important;right:1.5%!important;top:46%!important;width:min(650px,48vw)!important;opacity:.92!important;filter:drop-shadow(0 0 10px rgba(0,0,0,.9)) drop-shadow(0 0 34px rgba(192,87,205,.30)) drop-shadow(0 0 80px rgba(192,87,205,.13))!important}
.champHeroInner::before{content:"";position:absolute;z-index:2;pointer-events:none;right:-5%;top:15%;width:58%;height:68%;background:radial-gradient(ellipse at center,rgba(5,4,7,.62),rgba(7,5,9,.38) 38%,rgba(8,6,11,.12) 65%,transparent 78%)}
.champNext{position:relative;border-top:3px solid #a94db6!important;border-bottom:2px solid #5f3166!important;padding:20px 4px!important}
.champNext::before{content:"";position:absolute;left:0;top:-3px;width:92px;height:6px;background:#df73e8}
.champSectionHead{position:relative;border-bottom:3px solid #5f3166!important;padding-bottom:18px!important}
.champSectionHead::after{content:"";position:absolute;left:0;bottom:-3px;width:110px;height:5px;background:#c65bd2}
.sectionHead{border-bottom-width:2px}
.event{border-left:4px solid #74377d!important}
.event::after{height:3px!important;background:linear-gradient(90deg,#bd55c9 0 28%,#5d2c64 28% 64%,transparent 100%)!important}
.portalGrid{gap:3px!important;background:#603168!important}
.portal{border-top:3px solid #6d3775}
.portal .num{position:relative;display:inline-block;padding-bottom:10px}
.portal .num::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:4px;background:#c55bd1}
.official{border-top:3px solid #5e3065!important;border-bottom:3px solid #5e3065!important}
.official a{border-right-width:2px!important}
.nav{border-bottom:2px solid #65316c!important;position:relative}
.nav::after{content:"";position:absolute;left:0;bottom:-2px;width:150px;height:4px;background:linear-gradient(90deg,#d76ee1,transparent)}
.head{border-bottom:3px solid #542a5b;position:relative}
.head::before{content:"";position:absolute;left:0;bottom:-3px;width:clamp(100px,16vw,240px);height:6px;background:#bd56c9;z-index:2}
@media(max-width:760px){.champCopy{width:100%!important}.champLogo{right:-7%!important;top:32%!important;width:min(470px,72vw)!important;opacity:.50!important}.champHeroInner::before{right:-18%;top:12%;width:90%;height:58%}.champKicker{margin-bottom:26px}.champSectionHead::after{width:78px}}
/* ===== CHAMPIONSHIP v12 : restore the event-name billboard ===== */
.champLogoWord{
display:block !important;
position:relative;
z-index:4;
margin:0 0 22px;
max-width:760px;
color:#fff;
font-weight:950;
font-size:clamp(58px,7.2vw,122px) !important;
line-height:.88 !important;
letter-spacing:-.055em !important;
text-shadow:
0 4px 0 rgba(0,0,0,.55),
0 10px 34px rgba(0,0,0,.58);
}
/* Force the event name to read as a large two-line title. */
.champLogoWord{
font-size:0 !important;
}
.champLogoWord::before{
content:"エンドラRTA\A サミット";
white-space:pre;
display:block;
font-size:clamp(58px,7.2vw,122px);
line-height:.88;
letter-spacing:-.055em;
font-weight:950;
color:#fff;
}
.champLogoWord::after{
content:"";
display:block;
width:clamp(100px,11vw,180px);
height:7px;
margin-top:24px;
background:linear-gradient(90deg,#e477ec 0 58%,#793a81 58% 100%);
}
.champCopy{
width:min(820px,69%) !important;
}
.champKicker{
margin-bottom:22px !important;
}
/* Keep the image logo as a secondary emblem on the right. */
.champLogo{
width:min(560px,41vw) !important;
right:1.5% !important;
top:48% !important;
opacity:.88 !important;
}
.champHeroInner::before{
width:52% !important;
right:-3% !important;
}
/* Give the slogan room below the actual event name. */
.champTagline{
max-width:580px;
margin-top:18px !important;
}
@media(max-width:900px){
.champCopy{width:76% !important}
.champLogoWord::before{font-size:clamp(52px,8vw,86px)}
.champLogo{width:min(470px,43vw) !important;opacity:.72 !important}
}
@media(max-width:760px){
.champCopy{width:100% !important}
.champLogoWord{margin-bottom:18px}
.champLogoWord::before{
font-size:clamp(48px,14vw,76px);
line-height:.9;
}
.champLogoWord::after{
height:5px;
margin-top:18px;
}
.champLogo{
width:min(400px,66vw) !important;
right:-10% !important;
top:35% !important;
opacity:.34 !important;
}
}
/* ===== CHAMPIONSHIP v13 : mobile hero vertical composition ===== */
@media(max-width:760px){
.champHero{
min-height:900px !important;
}
.champHeroInner{
min-height:900px !important;
display:block !important;
position:relative !important;
}
/* Upper group: translucent slogan + emblem/logo image */
.champSlogan,
.champBigSlogan,
.heroSlogan{
top:6% !important;
bottom:auto !important;
}
.champLogo{
top:9% !important;
right:-3% !important;
width:min(430px,76vw) !important;
opacity:.52 !important;
transform:none !important;
}
.champHeroInner::before{
top:3% !important;
right:-20% !important;
width:110% !important;
height:48% !important;
}
/* Lower group: the readable event-name billboard */
.champCopy{
position:absolute !important;
z-index:5 !important;
left:20px !important;
right:20px !important;
bottom:16% !important;
top:auto !important;
width:auto !important;
max-width:none !important;
}
.champKicker{
margin-bottom:16px !important;
}
.champLogoWord{
margin:0 0 16px !important;
}
.champLogoWord::before{
font-size:clamp(47px,13.5vw,72px) !important;
line-height:.90 !important;
}
.champLogoWord::after{
width:92px !important;
height:5px !important;
margin-top:16px !important;
}
.champTagline{
max-width:88% !important;
margin-top:14px !important;
}
}
/* Slightly shorter phones: keep the same two-zone structure without overlap. */
@media(max-width:760px) and (max-height:760px){
.champHero,.champHeroInner{min-height:820px !important}
.champLogo{top:7% !important;width:min(390px,70vw) !important}
.champCopy{bottom:14% !important}
}
/* CHAMPIONSHIP v14: centered mobile emblem */
@media(max-width:760px){
.champLogo{left:50%!important;right:auto!important;top:9%!important;width:min(430px,76vw)!important;transform:translateX(-50%)!important;transform-origin:center top!important}
.champHeroInner::before{left:50%!important;right:auto!important;top:3%!important;width:110%!important;transform:translateX(-50%)!important}
}
@media(max-width:760px) and (max-height:760px){
.champLogo{left:50%!important;right:auto!important;top:7%!important;width:min(390px,70vw)!important;transform:translateX(-50%)!important}
}
/* ===== CHAMPIONSHIP v15 : Monocraft for Latin UI =====
Monocraft: OFL-1.1 / IdreesInc
Web font loading follows the project's documented website usage.
*/
@font-face{
font-family:"Monocraft";
src:url("https://cdn.jsdelivr.net/gh/IdreesInc/Monocraft@main/dist/Monocraft-ttf/Monocraft.ttf") format("truetype");
font-weight:400;
font-style:normal;
font-display:swap;
}
/* English/Latin interface labels only. Japanese body/title typography stays unchanged. */
.nav a,
.champKicker,
.champNextLabel,
.champSectionHead .eyebrow,
.sectionHead .eyebrow,
.event .eyebrow,
.event .meta,
.portal .num,
.portal .label,
.official a,
.english,
[data-font="english"],
.resultLabel,
.playerLabel,
.staffLabel,
.ruleLabel,
.archiveLabel{
font-family:"Monocraft",monospace !important;
font-weight:400 !important;
letter-spacing:.035em;
}
/* Keep the main Japanese identity explicitly on the normal site typeface. */
.champLogoWord,
.champLogoWord::before,
.champTagline,
.champBigSlogan,
.champSlogan,
.heroSlogan{
font-family:inherit;
}
/* ===== CHAMPIONSHIP v16 : Monocraft across English UI ===== */
/* Slightly larger top navigation */
.nav a{
font-family:"Monocraft",monospace !important;
font-size:1.08em !important;
letter-spacing:.045em !important;
}
/* English-facing headings / labels throughout the site */
.champNextLabel,
.champSectionHead,
.champSectionHead h2,
.sectionHead,
.sectionHead h1,
.sectionHead h2,
.eyebrow,
.kicker,
.label,
.num,
.meta,
.eventTitle,
.portal h2,
.portal h3,
.official,
.official a,
.resultTitle,
.resultLabel,
.playerLabel,
.staffLabel,
.ruleLabel,
.archiveLabel,
.eventStatus,
.eventSeason,
.eventRound,
.eventBo,
.eventArchive,
.pageEyebrow,
.pageLabel,
.smallCaps,
.uppercase,
[data-font="english"],
.english{
font-family:"Monocraft",monospace !important;
}
/* Preserve Japanese text if it shares a mixed container by allowing explicit JP elements
and the main Japanese branding to use the normal site font. */
.champLogoWord,
.champLogoWord::before,
.champTagline,
.champBigSlogan,
.champSlogan,
.heroSlogan,
.jp,
[data-font="jp"]{
font-family:inherit !important;
}
@media(max-width:760px){
.nav a{font-size:1.04em !important}
}
/* ===== CHAMPIONSHIP v17 : complete Latin/English Monocraft coverage =====
Monocraft contains Latin glyphs, while Japanese falls back to the site's
Japanese sans-serif. This lets mixed labels such as "PB 12:34" work too.
*/
:root{
--latin-ui-font:"Monocraft","Noto Sans JP","Yu Gothic UI","Yu Gothic",sans-serif;
}
/* Broad UI coverage: English uses Monocraft; Japanese automatically falls back. */
body,
button,
input,
select,
textarea,
.nav,
.champHero,
.champNext,
.champSectionHead,
.sectionHead,
.event,
.portal,
.official,
.head,
.page,
.card,
.panel,
.result,
.match,
.player,
.staff,
.rules,
footer{
font-family:var(--latin-ui-font) !important;
}
/* Headings/labels that were still escaping the earlier selector list. */
h1,h2,h3,h4,
.title,
.subtitle,
.eyebrow,
.kicker,
.label,
.meta,
.tag,
.badge,
.status,
.round,
.score,
.actions,
.btn,
.button,
.link,
.back,
.season,
.eventTitle,
.eventMeta,
.eventStatus,
.eventSeason,
.eventRound,
.eventBo,
.eventArchive,
.resultTitle,
.resultLabel,
.playerLabel,
.staffLabel,
.ruleLabel,
.archiveLabel,
.pageEyebrow,
.pageLabel,
.smallCaps,
.uppercase{
font-family:var(--latin-ui-font) !important;
}
/* Main Japanese hero typography remains intentionally non-pixel. */
.champLogoWord,
.champLogoWord::before,
.champTagline,
.champBigSlogan,
.champSlogan,
.heroSlogan{
font-family:"Noto Sans JP","Yu Gothic UI","Yu Gothic",sans-serif !important;
}
/* ===== CHAMPIONSHIP v19 : per-event key visuals =====
assets/events//key-visual.png
*/
body:has(#eventTitle) .top{
background:
linear-gradient(to bottom,rgba(7,5,10,.16) 0%,rgba(8,7,11,.32) 48%,#08070b 98%),
var(--event-key-visual),
url("common/background.png") center 35%/cover no-repeat !important;
background-size:auto,cover,cover !important;
background-position:center,center 42%,center !important;
background-repeat:no-repeat !important;
}
.event{
background:
linear-gradient(90deg,rgba(13,10,16,.96) 0%,rgba(13,10,16,.84) 55%,rgba(13,10,16,.58) 100%),
var(--event-key-visual),
#0d0a10 !important;
background-size:auto,cover,auto !important;
background-position:center,center 42%,center !important;
background-repeat:no-repeat !important;
}
.listRow{
position:relative;
overflow:hidden;
background:
linear-gradient(90deg,#08070b 0%,rgba(8,7,11,.97) 52%,rgba(8,7,11,.70) 100%),
var(--event-key-visual),
#08070b !important;
background-size:auto,52% auto,auto !important;
background-position:center,right center,center !important;
background-repeat:no-repeat !important;
}
.listRow>*{position:relative;z-index:1}
@media(max-width:760px){
body:has(#eventTitle) .top{background-position:center,center 45%,center !important}
.event{
background:linear-gradient(90deg,rgba(13,10,16,.95),rgba(13,10,16,.72)),var(--event-key-visual),#0d0a10 !important;
background-size:auto,cover,auto !important;
}
.listRow{
background:linear-gradient(90deg,rgba(8,7,11,.98),rgba(8,7,11,.78)),var(--event-key-visual),#08070b !important;
background-size:auto,cover,auto !important;
}
}
/* ===== CHAMPIONSHIP v19.3 : isolated random hero image layer ===== */
.champHero{
position:relative !important;
isolation:isolate;
background-image:none !important;
}
.heroRandomBg{
position:absolute;
inset:0;
z-index:-3;
background-position:center center;
background-size:cover;
background-repeat:no-repeat;
pointer-events:none;
}
.champHero::before{z-index:-2 !important}
.champHero::after{z-index:-1 !important}
.champHeroInner{position:relative;z-index:2}
/* Keep the existing fade/halftone treatment above the random image. */
/* ===== CHAMPIONSHIP v19.4 : definitive TOP random hero fix ===== */
.champHero{
position:relative !important;
isolation:isolate !important;
overflow:hidden;
}
.champHero > .heroRandomBg{
position:absolute !important;
inset:0 !important;
z-index:0 !important;
display:block !important;
background-position:center center !important;
background-size:cover !important;
background-repeat:no-repeat !important;
pointer-events:none !important;
}
.champHero > .champHeroInner,
.champHero > #nav{
position:relative !important;
z-index:4 !important;
}
/* Existing visual treatment stays above the photo but below text. */
.champHero::before{z-index:1 !important;pointer-events:none}
.champHero::after{z-index:2 !important;pointer-events:none}
/* ===== CHAMPIONSHIP v19.5 : restore full hero dark overlay =====
Random image stays on .heroRandomBg.
This overlay restores the darker broadcast-style treatment that existed
before the random-background layer was introduced.
*/
.champHero > .heroRandomBg::after{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:
linear-gradient(
90deg,
rgba(5,3,8,.42) 0%,
rgba(7,4,11,.31) 42%,
rgba(6,3,9,.38) 100%
),
linear-gradient(
180deg,
rgba(4,2,7,.24) 0%,
rgba(7,3,11,.30) 48%,
rgba(13,6,20,.54) 78%,
rgba(10,7,16,.76) 100%
);
}
/* Keep the selected photo itself below the restored tint. */
.champHero > .heroRandomBg{
z-index:0 !important;
}
/* Existing halftone / purple fade remains above the photo+tint. */
.champHero::before{z-index:2 !important}
.champHero::after{z-index:3 !important}
.champHero > .champHeroInner,
.champHero > #nav{
z-index:5 !important;
}
/* TOP STAFF is now a concise handoff to the dedicated staff page. */
.homeStaffGrid{display:none!important}
.homeStaffSection .champSectionHead>a{border:1px solid #704078;padding:15px 18px;color:#df82e8;transition:background .2s,border-color .2s,transform .2s}.homeStaffSection .champSectionHead>a:hover{background:#160e19;border-color:#c766d4;transform:translateX(3px)}
.homeStaffCta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center;padding:34px 0 8px;border-bottom:1px solid #3f2344}
.homeStaffCta p{max-width:720px;margin:0;color:#a99dab;font-size:14px;line-height:1.9}
.homeStaffCta a{display:flex;align-items:center;justify-content:space-between;gap:70px;min-width:260px;padding:21px 22px;border:1px solid #704078;color:#e08be8;font:800 12px Arial,sans-serif;letter-spacing:.17em;transition:background .25s,border-color .25s,transform .25s}
.homeStaffCta a:hover{background:#140d17;border-color:#c766d4;transform:translateX(4px)}
/* Staff list hero and portrait cards. */
.staffTop{overflow:hidden;background:linear-gradient(90deg,#070609f5 0%,#08070bdc 46%,#08070b75 76%,#08070b),url('common/background.png') center 34%/cover}
.staffTop .head{min-height:430px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
.staffTop .head>.label,.staffTop .head>h1,.staffTop .head>.status{position:relative;z-index:3;align-self:flex-start}
.staffHeroPortraits{position:absolute;z-index:1;right:-7%;bottom:-2px;width:72%;height:94%;display:flex;align-items:end;justify-content:flex-end;overflow:hidden;pointer-events:none}
.staffHeroPortraits::before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,#08070b 0%,transparent 28%,transparent 82%,#08070b80 100%)}
.staffHeroPortraits img{position:relative;z-index:1;width:17%;height:86%;object-fit:contain;object-position:center bottom;margin:0 -3.6%;filter:drop-shadow(0 0 18px #8f409936)}
.staffHeroPortraits img:nth-child(2n){height:77%;opacity:.88}.staffHeroPortraits img:nth-child(3n){height:70%;opacity:.75}
.staffCard{padding:0!important;overflow:hidden;position:relative}
.staffCardImage{height:220px;overflow:hidden;background:radial-gradient(circle at 50% 72%,#35183b,#0c0910 68%);border-bottom:1px solid #402345}
.staffCardImage img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 18px #9745a13b);transition:transform .35s ease,filter .35s ease}
.staffCard:hover .staffCardImage img{transform:translateY(-4px) scale(1.025);filter:drop-shadow(0 0 24px #c55bd155)}
.staffCardBody{position:relative;min-height:245px;padding:27px 28px 30px}
/* Make the selected ruleset unmistakable. */
.rulesTabs{gap:10px;border-bottom:0}
.rulesTabs button{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;min-width:210px;border:1px solid #38203d;padding:16px 20px}
.rulesTabs button b{font-size:15px;color:inherit}.rulesTabs button small{grid-column:2;display:block;margin-top:5px;color:#746a77;font:500 9px Arial,"Noto Sans JP",sans-serif;letter-spacing:.08em}
.rulesTabs button.active{background:linear-gradient(120deg,#25102a,#130c16);border-color:#cf63da;box-shadow:inset 4px 0 #db6ee5,0 0 22px #b44cc31c}
.rulesTabs button.active::after{content:"表示中";position:absolute;right:12px;top:10px;color:#ed9af4;font:800 8px Arial,"Noto Sans JP",sans-serif;letter-spacing:.12em}
.rulesTabs button.active small{color:#c296c7}
.rulesCurrent{margin:0 0 24px;padding:22px 25px;border-left:4px solid #d267dc;background:linear-gradient(90deg,#1c0e20,#0c0910)}
.rulesCurrent span{display:block;margin-bottom:8px;color:#a15cab;font:800 9px Arial,"Noto Sans JP",sans-serif;letter-spacing:.2em}
.rulesCurrent strong{display:block;font-size:clamp(22px,3vw,34px);letter-spacing:.06em}
@media(max-width:760px){
.homeStaffCta{grid-template-columns:1fr;gap:22px}.homeStaffCta a{min-width:0;width:100%}
.staffTop .head{min-height:520px;justify-content:flex-start;padding-top:76px}
.staffHeroPortraits{right:-22%;width:135%;height:68%}.staffHeroPortraits img{width:23%;margin:0 -7%}.staffHeroPortraits img:nth-child(n+7){display:none}
.staffCardImage{height:200px}.staffCardBody{min-height:225px;padding:24px 24px 28px}
.rulesTabs{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.rulesTabs button{min-width:0;width:100%;padding:15px 14px}.rulesTabs button.active::after{display:none}
}
/* Shared staff artwork: keep faces visible and darken only where text needs contrast. */
.homeStaffSection{position:relative;min-height:500px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(7,5,9,.95) 0%,rgba(8,6,11,.84) 34%,rgba(8,6,11,.34) 67%,rgba(8,6,11,.10) 100%),linear-gradient(0deg,rgba(8,7,11,.68),transparent 48%),url('common/staff-hero.png') center 47%/cover no-repeat}
.homeStaffSection::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#08070b4d 0%,transparent 18%,transparent 78%,#08070bc9 100%)}
.homeStaffSection .wrap{position:relative;z-index:1;width:min(1180px,90vw)}
.homeStaffSection .champSectionHead{max-width:620px}.homeStaffSection .homeStaffLead{max-width:570px;margin-top:26px;color:#d2c6d4;font-size:14px;line-height:1.9;text-shadow:0 2px 14px #000}
.homeStaffSection .champSectionHead>a{background:#0b080dcc;backdrop-filter:blur(6px)}
.staffTop{min-height:620px;background:linear-gradient(90deg,rgba(7,5,9,.90) 0%,rgba(8,6,11,.72) 25%,rgba(8,6,11,.16) 58%,rgba(8,6,11,.04) 100%),linear-gradient(0deg,rgba(8,7,11,.82) 0%,transparent 42%),url('common/staff-hero.png') center 47%/cover no-repeat!important}
.staffTop::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(180deg,#08070b26 0%,transparent 62%,#08070be0 100%)}
.staffTop .nav,.staffTop .head{position:relative;z-index:2}.staffTop .head{min-height:540px}
.staffTop .head>.label,.staffTop .head>h1,.staffTop .head>.status{text-shadow:0 3px 22px #000}
.staffHeroPortraits{display:none!important}
@media(max-width:760px){
.homeStaffSection{min-height:540px;align-items:end;background:linear-gradient(0deg,rgba(7,5,9,.96) 0%,rgba(8,6,11,.74) 44%,rgba(8,6,11,.10) 88%),url('common/staff-hero.png') center 42%/cover no-repeat;padding-top:220px}
.homeStaffSection .champSectionHead{display:grid;gap:22px}.homeStaffSection .champSectionHead>a{justify-self:start}
.staffTop{min-height:570px;background:linear-gradient(0deg,rgba(7,5,9,.92) 0%,rgba(8,6,11,.44) 50%,rgba(8,6,11,.08) 100%),url('common/staff-hero.png') center 44%/cover no-repeat!important}
.staffTop .head{min-height:490px;justify-content:flex-end;padding:70px 0 72px}
}
/* TOP narrative order: About -> Next Summit -> Staff -> Events. */
.champHome main{display:flex;flex-direction:column}
.champHome main>.summitStory{order:1}
.champHome main>.homeStaffSection{order:2}
.champHome main>section:nth-of-type(2){order:3}
.champHome main>section:nth-of-type(4){order:4}
/* Staff joins the alternating image-and-copy story flow. */
.homeStaffSection{
min-height:0;
display:block;
align-items:initial;
padding:34px 0 110px;
background:#070609;
}
.homeStaffSection::after{display:none}
.homeStaffSection .wrap{
display:grid;
grid-template-columns:minmax(0,.86fr) minmax(420px,1.14fr);
grid-template-rows:auto 1fr;
column-gap:clamp(50px,7vw,104px);
align-items:center;
}
.homeStaffSection .wrap::before{
content:"";
grid-column:2;
grid-row:1/3;
min-height:430px;
align-self:stretch;
background:linear-gradient(90deg,rgba(7,6,9,.04),rgba(7,6,9,.18)),url('common/staff-hero.png') center/cover no-repeat;
box-shadow:0 28px 70px rgba(0,0,0,.28);
}
.homeStaffSection .champSectionHead{
grid-column:1;
grid-row:1;
display:block;
max-width:none;
align-self:end;
margin:0;
padding-bottom:0!important;
border-bottom:0!important;
}
.homeStaffSection .champSectionHead::after{display:none}
.homeStaffSection .champSectionHead>a{
display:inline-flex;
margin-top:28px;
background:transparent;
backdrop-filter:none;
}
.homeStaffSection .homeStaffLead{
grid-column:1;
grid-row:2;
max-width:520px;
align-self:start;
margin:26px 0 0;
color:#aaa0ad;
line-height:1.95;
text-shadow:none;
}
@media(max-width:900px){
.homeStaffSection{padding:10px 0 86px}
.homeStaffSection .wrap{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:0}
.homeStaffSection .champSectionHead{grid-column:1;grid-row:1}
.homeStaffSection .homeStaffLead{grid-column:1;grid-row:2;margin-bottom:34px}
.homeStaffSection .wrap::before{grid-column:1;grid-row:3;min-height:clamp(260px,56vw,430px)}
}
@media(max-width:560px){
.homeStaffSection{min-height:0;padding:0 0 72px;background:#070609}
.homeStaffSection .champSectionHead{display:block}
.homeStaffSection .champSectionHead>a{justify-self:auto;margin-top:24px}
.homeStaffSection .wrap::before{min-height:250px;background-position:center}
}
/* Spectator server */
.spectateTop{min-height:66vh;background:linear-gradient(90deg,#070609ed 0%,#08070ba8 58%,#08070b5c),url('common/spectate-venue.png') center 43%/cover no-repeat}
.spectateTop .head{min-height:520px;display:flex;flex-direction:column;justify-content:flex-end}
.serverConnect{display:grid;grid-template-columns:1.25fr .75fr;margin-top:42px;border-top:1px solid #693271;border-bottom:1px solid #3b2140}
.serverConnect>div{padding:28px 26px}.serverConnect>div+div{border-left:1px solid #3b2140}.serverConnect span{display:block;margin-bottom:12px;color:#bd68c7;font:700 10px Arial,sans-serif;letter-spacing:.22em}.serverConnect strong{font:800 clamp(20px,3vw,38px) Arial,sans-serif;letter-spacing:.04em}
.serverConnect>.serverDiscordBox{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:0 28px}.serverDiscordBox>span{grid-column:1/-1}.serverDiscordBox>strong{grid-column:1;grid-row:2}.serverDiscord{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr auto;gap:5px 32px;align-items:center;min-width:285px;padding:17px 19px;background:#b953c5;color:#0b070c;transition:background .2s,transform .2s}.serverDiscord small{grid-column:1;font:900 8px Arial,sans-serif;letter-spacing:.2em;opacity:.68}.serverDiscord b{grid-column:1;font-size:13px;letter-spacing:.05em}.serverDiscord i{grid-column:2;grid-row:1/3;font:22px Arial,sans-serif;font-style:normal}.serverDiscord:hover{background:#df76e8;transform:translateX(4px)}
.serverConnect:has(.serverJoinCopy){grid-template-columns:minmax(0,1fr) auto;align-items:stretch;background:linear-gradient(120deg,#100b13,#09080b)}.serverJoinCopy{padding:38px 40px!important}.serverJoinCopy>span{display:block;margin-bottom:17px;color:#bd68c7;font:800 10px Arial,sans-serif;letter-spacing:.22em}.serverJoinCopy h2{margin:0 0 15px;font-size:clamp(24px,3vw,38px);line-height:1.25;letter-spacing:.03em}.serverJoinCopy p{max-width:620px;margin:0;color:#a99dab;font-size:13px;line-height:1.8}.serverJoinButton{display:grid;grid-template-columns:1fr auto;align-content:center;gap:7px 42px;min-width:330px;padding:34px;background:#b953c5;color:#0a070b;transition:background .25s,transform .25s}.serverJoinButton small{grid-column:1;font:900 9px Arial,sans-serif;letter-spacing:.2em;opacity:.66}.serverJoinButton b{grid-column:1;font-size:15px;letter-spacing:.05em}.serverJoinButton i{grid-column:2;grid-row:1/3;align-self:center;font:28px Arial,sans-serif;font-style:normal;transition:transform .25s}.serverJoinButton:hover{background:#df76e8}.serverJoinButton:hover i{transform:translateX(6px)}
.serverConnect:has(.serverJoinCopy)>.serverDiscord{grid-column:2;grid-row:1;display:inline-flex;align-items:center;justify-content:center;align-self:center;margin:0 34px;min-width:250px;padding:16px 20px;border:1px solid #875090;background:transparent;color:#e28cea;font:800 11px Arial,"Noto Sans JP",sans-serif;letter-spacing:.12em;transition:background .2s,border-color .2s,transform .2s}.serverConnect:has(.serverJoinCopy)>.serverDiscord:hover{background:#1a1020;border-color:#db76e5;transform:translateX(4px)}
.spectateStory{padding:100px 0 0;background:#08070b}.spectateFeatures{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#4a2650}.spectateFeature{position:relative;min-height:245px;padding:30px;background:linear-gradient(140deg,#100b13,#09080b)}.spectateFeature>span{color:#8e4997;font:700 10px Arial,sans-serif;letter-spacing:.2em}.spectateFeature h2{margin:44px 0 14px;font-size:21px;letter-spacing:.06em}.spectateFeature p{margin:0;color:#a99dab;font-size:13px;line-height:1.85}.spectateGuide{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;padding:45px 0;border-top:1px solid #693271;border-bottom:1px solid #3b2140}.spectateGuide h2{margin:12px 0 0;font-size:30px}.spectateGuide ul{margin:0;padding:0;list-style:none}.spectateGuide li{padding:15px 0;border-bottom:1px solid #302033;color:#b7abb9;line-height:1.8}.spectateGuide li:first-child{padding-top:0}.spectateGuide li::before{content:"→";margin-right:14px;color:#d16edc}
.homeSpectateCta{display:grid;grid-template-columns:minmax(300px,.9fr) 1.1fr;min-height:250px;margin-top:30px;overflow:hidden;border-left:3px solid #a74db5;background:linear-gradient(120deg,#130d16,#09080b);transition:background .25s,transform .25s}.homeSpectateCta:hover{background:#160f19;transform:translateY(-3px)}.homeSpectateImage{overflow:hidden}.homeSpectateImage img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.76) brightness(.72);transition:transform .7s,filter .4s}.homeSpectateCta:hover img{transform:scale(1.035);filter:saturate(.9) brightness(.8)}.homeSpectateCopy{position:relative;padding:34px 38px}.homeSpectateCopy span{color:#c36cce;font:800 10px Arial,sans-serif;letter-spacing:.22em}.homeSpectateCopy h3{margin:22px 0 12px;font-size:30px;letter-spacing:.06em}.homeSpectateCopy p{margin:0;color:#a99dab;font-size:13px}.homeSpectateCopy b{position:absolute;right:34px;bottom:30px;color:#df80e8;font:800 11px Arial,sans-serif;letter-spacing:.15em;transition:transform .25s}.homeSpectateCta:hover b{transform:translateX(5px)}
@media(max-width:760px){.navlinks{gap:9px;font-size:8px}.spectateTop .head{min-height:450px}.serverConnect,.serverConnect:has(.serverJoinCopy),.spectateFeatures,.spectateGuide{grid-template-columns:1fr}.serverConnect>div+div{border-left:0;border-top:1px solid #3b2140}.serverJoinCopy{padding:30px 24px!important}.serverConnect:has(.serverJoinCopy)>.serverDiscord{grid-column:1;grid-row:2;width:auto;min-width:0;margin:0 24px 28px}.spectateStory{padding-top:76px}.spectateGuide{gap:34px}.spectateFeature{min-height:210px}}
@media(max-width:660px){.homeSpectateCta{grid-template-columns:1fr}.homeSpectateImage{height:210px}.homeSpectateCopy{min-height:230px;padding:28px 24px}.homeSpectateCopy b{right:24px;bottom:25px}}
/* TOP follows its actual document order: stories, events, then official links. */
.champHome main{display:block}
/* A quiet cue that the TOP hero continues below the fold. */
.homeScrollCue{position:absolute;z-index:8;left:50%;bottom:24px;display:flex;flex-direction:column;align-items:center;gap:12px;transform:translateX(-50%);color:#eaddec;font:900 10px Arial,sans-serif;letter-spacing:.3em;text-shadow:0 2px 12px #000;transition:opacity .35s,transform .35s}.homeScrollCue::before{content:"CONTINUE";font-size:8px;color:#c29bc7;letter-spacing:.22em}.homeScrollCue i{display:block;width:22px;height:22px;border-right:3px solid #ef9af5;border-bottom:3px solid #ef9af5;transform:rotate(45deg);filter:drop-shadow(0 0 7px #d866e1);animation:scrollChevron 1.35s ease-in-out infinite}.homeScrollCue:hover{color:#fff;transform:translateX(-50%) translateY(4px)}.homeScrollCue.is-hidden{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(15px)}
@keyframes scrollChevron{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.45}50%{transform:rotate(45deg) translate(8px,8px);opacity:1}}
@media(max-width:760px){.homeScrollCue{bottom:18px}.homeScrollCue i{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.homeScrollCue i{animation:none}}
/* Event staff portraits sit behind the existing profile copy. */
#eventStaff .person{isolation:isolate;min-height:250px;padding:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,#130d16,#09080b)}
#eventStaff .person::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(8,6,10,.02) 0%,rgba(8,6,10,.12) 38%,rgba(8,6,10,.88) 72%,#09070b 100%);pointer-events:none}
#eventStaff .eventStaffImage{position:absolute;z-index:0;left:0;top:0;width:100%;height:88%;object-fit:contain;object-position:center top;transform:scale(1.28);transform-origin:center 10%;filter:drop-shadow(0 0 18px rgba(177,79,190,.28));transition:transform .45s ease,filter .45s ease}
#eventStaff .person:hover .eventStaffImage{transform:scale(1.34) translateY(-2px);filter:drop-shadow(0 0 25px rgba(205,96,218,.42))}
#eventStaff .person>b,#eventStaff .person>span,#eventStaff .person>i{position:relative;z-index:2}
#eventStaff .person>b{margin:0;padding:155px 22px 0;font-size:19px;text-shadow:0 2px 12px #000}
#eventStaff .person>span{min-height:65px;padding:8px 22px 35px;color:#c7bac9;text-shadow:0 2px 10px #000}
#eventStaff .person>i{right:20px;bottom:17px;color:#c66fd0}
/* Keep both competitor names on one line on narrow screens. */
.versus{white-space:nowrap}
@media(max-width:760px){
.match{grid-template-columns:1fr;padding:16px 0}
.round{grid-column:1;padding:4px 16px}
.versus{grid-column:1;display:block;width:100%;padding:9px 12px;font-size:clamp(10px,3.2vw,13px);letter-spacing:0;text-align:center;overflow-x:auto;scrollbar-width:none}
.versus::-webkit-scrollbar{display:none}
.versus span{margin:0 clamp(6px,2.5vw,12px)!important}
.score{grid-column:1;padding:5px 16px;text-align:right;font-size:15px}
.archive{grid-column:1;justify-self:start;margin:8px 16px 0}
#eventStaff .person{min-height:270px}
#eventStaff .person>b{padding-top:170px}
}
/* Event staff cards: retain the original compact footprint and crop portraits to the upper body. */
#eventStaff .person{height:160px;min-height:160px}
#eventStaff .eventStaffImage{left:auto;right:-6%;top:0;width:62%;height:auto;max-width:none;object-fit:initial;object-position:initial;transform:scale(1);transform-origin:right top}
#eventStaff .person:hover .eventStaffImage{transform:scale(1.04) translateY(-2px)}
#eventStaff .person>b{padding:91px 20px 0;margin:0;font-size:18px}
#eventStaff .person>span{min-height:0;padding:5px 20px 29px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#eventStaff .person>i{position:absolute!important;left:auto!important;right:18px!important;bottom:13px!important;width:auto;padding:0}
@media(max-width:760px){
#eventStaff .person{height:180px;min-height:180px}
#eventStaff .eventStaffImage{left:auto;right:0;top:-34px;width:68%;transform:scale(1.12)}
#eventStaff .person:hover .eventStaffImage{transform:scale(1.16) translateY(-2px)}
#eventStaff .person>b{padding:104px 20px 0}
}