@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#141311;--panel:#1e1c19;--border:#36322d;--text:#f4efe9;--muted:#aca6a0;--green:#efb879;--amber:#efc879;--red:#ed9189}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{ -webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:5px}header,main,footer{max-width:1240px;margin:auto}.header{height:95px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:2px;font-size:21px}.brand-icon{display:grid;place-items:center;background:var(--green);color:#1d1b19;width:31px;height:35px;clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%);font-size:22px}.brand-divider{height:22px;width:1px;background:var(--border);margin:0 7px}.brand-sub{font-size:10px;color:var(--muted);font-weight:500;letter-spacing:1.8px}.header-link{font-size:12px;color:#cfcac5}.header-link span{color:var(--green);margin-left:20px}.hero{min-height:545px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:55px 0 52px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;display:flex;align-items:center;gap:9px}.live-dot{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 12px #efb87940}.intro .eyebrow{color:var(--green)}h1,h2,h3,p{margin:0}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;font-size:88px;line-height:.97;letter-spacing:-1px;margin:24px 0}h1 span{color:var(--green)}.intro p{color:var(--muted);line-height:1.85;font-size:14px}.primary{margin-top:27px;display:inline-flex;gap:45px;align-items:center;padding:15px 20px;background:var(--green);border-radius:5px;color:#1f1c19;font-weight:700;font-size:13px;transition:background .2s}.primary:hover{background:#ffca8e}.intro-note{font-size:10px;color:#a19b94;margin-top:16px}.intro-note span{color:var(--green);margin-right:6px}.hero-art{height:410px;position:relative;isolation:isolate;background:radial-gradient(ellipse at center,#3c373280,transparent 68%);overflow:hidden}.orbit{position:absolute;border:1px solid #3f3a35;border-radius:50%;width:380px;height:380px;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1}.orbit-two{width:470px;height:470px;border-style:dashed;opacity:.5}.art-label,.art-coordinate{position:absolute;color:#8d867f;letter-spacing:2px;font-size:8px;left:25px;top:15px}.art-coordinate{top:auto;bottom:8px;left:auto;right:10px}.art-cross{position:absolute;right:25px;top:10px;color:var(--green);font-size:24px;font-weight:400}.art-card{position:absolute;width:168px;height:230px;border:3px solid #97836c;border-radius:12px;overflow:hidden;box-shadow:0 15px 45px #0008;top:92px;background:#333}.art-card img{width:100%;height:100%;object-fit:cover}.art-card span{position:absolute;bottom:10px;right:10px;background:var(--green);color:#2c2824;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:bold}.back-left{left:28px;transform:rotate(-13deg)}.back-right{right:22px;transform:rotate(13deg)}.front{left:50%;transform:translateX(-50%);top:63px;width:188px;height:266px;border-color:var(--green);z-index:2}.art-caption{position:absolute;z-index:3;bottom:36px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:13px 19px;border:1px solid #4d4740;background:#25221e;border-radius:5px;font-size:9px;letter-spacing:1.5px;color:#ead6c0;display:flex;align-items:center;gap:9px}.guide{border-top:1px solid var(--border);padding-top:36px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.muted{color:#989087;margin-bottom:10px}h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:34px;line-height:1.1;font-weight:600;letter-spacing:.2px}.tabs{display:flex;border:1px solid var(--border);padding:5px;border-radius:7px;gap:5px;background:#191715}.tabs button{background:transparent;border:0;color:#b0aaa4;padding:11px 17px;border-radius:4px;font-size:12px}.tabs button[aria-selected=true]{background:#3c3833;color:#f2d5b3}.formation{border:1px solid var(--border);border-radius:10px;background:var(--panel);display:grid;grid-template-columns:1fr 1.2fr;padding:30px 36px;gap:35px;min-height:255px}.rule-label{color:var(--green);font-size:10px;letter-spacing:1.5px;margin-bottom:13px;font-weight:700}.formation h3{font-size:25px;line-height:1.25;max-width:350px;font-family:'Barlow Condensed',Impact,sans-serif;letter-spacing:.3px}.formation h3 em{font-style:normal;color:var(--green)}.formation-copy p{color:var(--muted);font-size:12px;line-height:1.8;max-width:340px;margin-top:12px}.formation-footnote{margin-top:18px;display:inline-flex;gap:7px;font-size:10px;color:#d6c7b6}.slots{display:flex;justify-content:center;gap:17px;align-items:center}.slot{position:relative;text-align:center;width:107px}.slot-num{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:#3c3833;border:1px solid #9c8265;border-radius:50%;width:22px;height:22px;z-index:1;font-size:10px;display:grid;place-items:center;color:var(--green)}.slot-portrait{height:137px;border:2px solid var(--green);border-radius:7px;overflow:hidden;background:#282522}.slot-portrait img{width:100%;height:100%;object-fit:cover;object-position:top}.slot-name{font-size:10px;margin-top:10px;color:var(--green)}.slot.empty .slot-portrait{border:1px dashed #534c45;display:grid;place-items:center;color:#645b51;font-size:29px;font-weight:400;background:linear-gradient(145deg,#2a2723,#201e1b)}.slot.empty .slot-num{background:#2d2925;border-color:#534c45;color:#afa8a1}.slot.empty .slot-name{color:#a6a099}.heroes-section{margin-top:56px}.section-description{color:var(--muted);font-size:12px;margin-top:10px}.reference-note{color:#908981;font-size:10px}.filterbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);margin-bottom:29px;padding-bottom:16px;gap:16px}.filters{display:flex;gap:8px;flex-wrap:wrap}.filters button{border:1px solid transparent;border-radius:5px;background:transparent;color:#b2aca6;font-size:11px;padding:9px 12px;display:flex;align-items:center;gap:7px}.filters button:hover{background:#282522}.filters button.active{background:#2c2925;color:#efe5da;border-color:#4b453e}.filters button span{font-size:9px;opacity:.7;margin-left:4px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0}.dot.best{background:var(--green)}.dot.okay{background:var(--amber)}.dot.avoid{background:var(--red)}#result-count{color:#918a82;font-size:10px;white-space:nowrap}.group{margin-bottom:30px}.group-heading{display:flex;align-items:center;gap:12px;margin-bottom:16px}.group-icon{border-radius:50%;width:21px;height:21px;display:grid;place-items:center;font-size:12px;background:#efb87920;color:var(--green)}.group.okay .group-icon{color:var(--amber);background:#efc87920}.group.avoid .group-icon{color:var(--red);background:#ed918920}.group-heading h3{font-size:14px;font-weight:600}.group-heading p{font-size:11px;color:var(--muted);margin-left:auto}.hero-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:13px}.hero-card{border:1px solid #3f3a35;border-radius:7px;overflow:hidden;background:#23211e;transition:transform .2s,border-color .2s}.hero-card:hover{transform:translateY(-4px);border-color:var(--green)}.portrait{position:relative;aspect-ratio:1/1.13;overflow:hidden;background:#312d28}.portrait img{width:100%;height:100%;object-fit:cover;object-position:top}.portrait::after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#151412a0)}.status-icon{position:absolute;right:8px;top:8px;z-index:1;background:var(--green);color:#23201d;box-shadow:0 2px 8px #0004;border-radius:50%;width:23px;height:23px;display:grid;place-items:center;font-weight:bold;font-size:12px}.card-caption{padding:11px 10px 12px}.card-caption h4{font-size:11px;font-weight:500;margin:0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-caption p{font-size:8px;letter-spacing:.8px;color:var(--green);text-transform:uppercase}.okay .hero-card{border-color:#4e4633;background:#29271f}.okay .status-icon{background:var(--amber)}.okay .card-caption p{color:var(--amber)}.avoid .hero-card{border-color:#3b3431;background:#241f1d}.avoid .status-icon{background:var(--red)}.avoid .card-caption p{color:var(--red)}.avoid .portrait img{filter:saturate(.64)}.source-note{color:#867f78;font-size:10px;line-height:1.7;margin-top:5px}.takeaway{display:flex;gap:24px;align-items:center;background:#282522;border:1px solid #46413b;border-radius:9px;padding:28px 32px;margin:43px 0 50px}.takeaway-icon{width:49px;height:49px;display:grid;place-items:center;color:var(--green);font-size:27px;border:1px solid #63503b;border-radius:9px}.takeaway .eyebrow{color:var(--green);font-size:9px;margin-bottom:10px}.takeaway h2{font-size:26px}.takeaway p{font-size:11px;margin-top:8px;color:#bcb0a2}.takeaway>a{margin-left:auto;font-size:23px;color:var(--green)}footer{border-top:1px solid var(--border);padding:27px 0 32px;display:flex;justify-content:space-between;align-items:center;color:#958e87;font-size:10px}footer .brand{font-size:15px;color:#d2cdc7}footer .brand-sub{font-size:8px}
@media(min-width:1500px){header,main,footer{max-width:1300px}.hero{min-height:580px}.hero-art{height:440px}.back-left{left:55px}.back-right{right:50px}}
@media(max-width:1320px){header,main,footer{margin-left:6%;margin-right:6%}h1{font-size:80px}.art-card{width:145px}.front{width:169px}.back-left{left:8px}.back-right{right:5px}}
@media(max-width:900px){.hero{gap:10px}.hero-art{height:350px}.art-card{width:120px;height:185px}.front{width:143px;height:214px;top:70px}.art-caption{font-size:7px;bottom:31px}h1{font-size:66px}.intro p{font-size:12px}.formation{padding:26px;gap:20px}.slot{width:86px}.slot-portrait{height:117px}.slots{gap:10px}.hero-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.tabs button{padding:10px}.reference-note{display:none}}
@media(max-width:620px){header,main,footer{margin-left:6%;margin-right:6%}.header{height:75px}.brand-sub,.brand-divider{display:none}.header-link{font-size:11px}.hero{grid-template-columns:1fr;padding-top:36px;gap:6px}.intro h1{font-size:77px}.intro p{font-size:13px}.hero-art{height:335px;max-width:400px;width:100%;margin:auto}.art-card{width:135px;height:195px}.front{width:157px;height:230px;top:44px}.back-left{left:16px;top:70px}.back-right{right:16px;top:70px}.art-label{top:10px}.art-caption{bottom:25px;font-size:8px}.section-heading{align-items:flex-start;flex-direction:column;gap:20px}h2{font-size:31px}.tabs{width:100%}.tabs button{flex:1;font-size:12px}.formation{grid-template-columns:1fr;gap:32px;padding:25px}.formation h3{font-size:28px}.formation-copy p{max-width:none}.slots{padding:4px 0 0;gap:16px}.slot{width:90px}.slot-portrait{height:120px}.hero-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.heroes-section{margin-top:38px}.filterbar{align-items:flex-start}#result-count{display:none}.filters{gap:4px}.filters button{padding:8px;font-size:10px}.group-heading{flex-wrap:wrap;gap:8px}.group-heading p{width:100%;margin-left:29px;font-size:10px}.card-caption{padding:9px 7px}.card-caption h4{font-size:10px}.card-caption p{font-size:7px;letter-spacing:.3px}.status-icon{width:20px;height:20px;right:6px;top:6px}.takeaway{padding:22px 19px;gap:14px}.takeaway-icon{display:none}.takeaway h2{font-size:25px}.takeaway p{line-height:1.7}.takeaway .eyebrow{font-size:8px;letter-spacing:1.2px}footer{gap:20px;flex-wrap:wrap}footer>span{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
[hidden]{display:none!important}
.season-banner strong+strong{margin-left:10px}.why-section{margin-top:30px}.why-details{border:1px solid var(--border);border-radius:10px;background:#1b1916}.why-details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 30px;cursor:pointer}.why-details>summary::-webkit-details-marker{display:none}.why-title{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-size:29px;font-weight:600}.details-toggle{font-size:27px;color:var(--green)}.why-details[open] .details-toggle{transform:rotate(45deg)}.why-content{padding:0 30px 30px}.why-lead{color:var(--muted);line-height:1.9;font-size:14px;max-width:850px}.why-lead strong{color:var(--text);font-weight:600}.rule-chain{display:flex;gap:18px;align-items:center;padding:23px 0 28px}.rule-chain>span{display:flex;align-items:center;gap:11px;color:#d2cac1;font-size:12px}.rule-chain b{display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:#38332e;color:var(--green);font-size:19px}.rule-chain i{font-style:normal;color:#75695c}.why-examples{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}.example-card{background:#211f1c;border:1px solid var(--border);border-radius:8px;overflow:hidden}.example-copy{padding:23px 23px 20px}.example-copy .rule-label{display:block;font-size:9px}.example-copy h3{font-family:'Barlow Condensed',Impact,sans-serif;font-size:25px;margin-bottom:12px}.example-copy p,.skill-steps{font-size:12px;color:var(--muted);line-height:1.85}.skill-steps{margin:0;padding-left:18px}.skill-steps li+li{margin-top:5px}.skill-steps strong{color:#e1dad2;font-weight:500}.image-zoom{padding:0;border:0;display:block;width:100%;background:#141210;position:relative;color:#efe7dd;text-align:center;cursor:zoom-in}.image-zoom>img{display:block;width:100%;height:auto}.image-zoom>span{display:block;padding:11px;background:#2b2824;color:#e6d4bf;font-size:10px;letter-spacing:.5px}.example-card .image-zoom{width:calc(100% - 46px);margin:0 23px 20px;border-radius:6px;overflow:hidden}.example-card .image-zoom img{max-height:520px;object-fit:contain}.image-caption{font-size:10px;line-height:1.6;color:#978d82;padding:0 23px 20px}.skill-callout{margin-top:22px;padding:22px;background:#2b2723;border:1px solid #47423c;display:flex;gap:25px;align-items:center;border-radius:7px}.skill-callout .eyebrow{font-size:8px;color:var(--green)}.skill-callout h3{font-family:'Barlow Condensed',Impact,sans-serif;font-size:25px;margin:8px 0}.skill-callout p{font-size:11px;line-height:1.7;color:var(--muted);max-width:400px}.skill-levels{display:flex;gap:10px;margin-left:auto;flex-shrink:0}.skill-levels>span{text-align:center;border:1px solid #4c463f;border-radius:5px;padding:12px 9px;min-width:51px}.skill-levels small{display:block;font-size:8px;color:#afa395;margin-bottom:7px}.skill-levels b{color:#dfd2c3;font-size:17px}.skill-levels>span:last-child{background:var(--green);border-color:var(--green)}.skill-levels>span:last-child small,.skill-levels>span:last-child b{color:#2d2925}
.creator-intro{display:flex;align-items:center;justify-content:space-between;padding:27px 32px;background:var(--panel);border:1px solid var(--border);border-radius:9px}.creator-intro h3{font-size:34px;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:600;margin-bottom:10px}.creator-intro p{font-size:12px;color:var(--muted);line-height:1.85;max-width:690px}.creator-emblem{font-size:47px;color:var(--green);margin:0 15px 0 30px}.season-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:22px 0 16px}.season-picker button{background:#201e1b;color:#b4aca2;border:1px solid var(--border);padding:13px 10px;border-radius:5px;font-size:12px}.season-picker button[aria-pressed=true]{background:var(--green);color:#2a2723;border-color:var(--green);font-weight:700}.season-picker button:hover{border-color:var(--green)}.season-lineup{display:grid;grid-template-columns:1fr 1.3fr;gap:38px;padding:30px;background:linear-gradient(120deg,#2d2a26,#1f1c19);border:1px solid #4d4741;border-radius:9px;align-items:center}.season-lineup-copy .eyebrow{font-size:10px;color:var(--green);margin-bottom:16px}.season-lineup-copy h3{font-size:30px;font-family:'Barlow Condensed',Impact,sans-serif;margin-bottom:15px;line-height:1.15}.season-lineup-copy p{color:var(--muted);font-size:12px;line-height:1.8}.formation-tag{display:inline-block;color:#c4af96;font-size:8px;letter-spacing:1px;border:1px solid #615240;border-radius:3px;padding:7px 9px;margin-top:23px}.creator-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:540px}.position-label{display:block;font-size:8px;letter-spacing:1.4px;color:#d7c9b9;margin:0 0 10px}.creator-portrait{aspect-ratio:1;overflow:hidden;background:#2c2925;border-radius:5px}.creator-portrait>img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}.creator-slot .creator-portrait{border:2px solid #c8a57e;box-shadow:0 8px 20px #0003}.creator-slot p{font-size:10px;color:#e4dbd0;margin-top:10px;line-height:1.5}.source-reference{margin-top:15px;border-bottom:1px solid var(--border);padding:0 0 20px}.source-reference>summary{color:#bbad9e;font-size:11px;cursor:pointer;padding:8px 0;line-height:1.7}.source-reference>summary span{color:var(--green);margin-left:8px}.formation-source{max-width:380px;margin:20px auto 0}.creator-tiers{margin:36px 0 50px}.creator-tiers>.section-description{max-width:780px;line-height:1.8}.tier-context{border-left:2px solid #c8a57e;background:#272420;padding:15px 18px;color:#c9bbab;font-size:11px;line-height:1.8;margin:22px 0 30px}.creator-tier{margin:28px 0}.tier-heading{display:flex;align-items:center;gap:14px;margin-bottom:17px}.tier-letter{width:40px;height:42px;display:grid;place-items:center;background:#ef9189;color:#281e1c;font-size:23px;font-weight:700;border-radius:5px}.tier-a .tier-letter{background:#f2bf76}.tier-b .tier-letter{background:#e7d878}.tier-heading h3{font-size:15px;margin-bottom:5px}.tier-heading p{font-size:11px;color:var(--muted);line-height:1.6}.tier-count{margin-left:auto;font-size:10px;color:#9d9285;white-space:nowrap}.creator-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:13px}.creator-card{padding:6px;background:#24211e;border:1px solid #403b36;border-radius:7px;min-width:0}.creator-card h4{font-size:10px;line-height:1.5;margin:10px 4px 5px;font-weight:500;color:#ddd3c7}.source-link{background:transparent;color:var(--green);border:1px solid #4d4741;border-radius:5px;padding:12px 16px;font-size:11px;margin-bottom:12px}.source-link:hover{background:#2d2a26}
dialog{color:var(--text);background:#1a1816;border:1px solid #675846;border-radius:10px;padding:16px;max-width:94vw;max-height:94dvh;width:max-content;overscroll-behavior:contain}dialog::backdrop{background:#080706e8;backdrop-filter:blur(7px)}.dialog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;position:sticky;top:-16px;background:#1a1816;padding:10px 0 16px;z-index:1}.dialog-toolbar p{font-size:12px;line-height:1.5}.dialog-toolbar button{border:1px solid #635544;background:#2d2a26;color:#ecdecf;border-radius:5px;padding:9px 13px;white-space:nowrap}#dialog-image{display:block;max-width:100%;max-height:calc(88dvh - 65px);object-fit:contain;margin:auto}.dialog-open{overflow:hidden}summary:focus-visible{outline:2px solid var(--green);outline-offset:4px}
@media(max-width:900px){.skill-callout{align-items:flex-start;flex-direction:column}.skill-levels{margin-left:0}.creator-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.season-lineup{gap:20px;padding:25px}.creator-slots{gap:9px}.rule-chain{gap:10px}.rule-chain>span{font-size:10px;gap:7px}.why-content{padding:0 24px 24px}.example-copy{padding:18px}.example-card .image-zoom{width:calc(100% - 36px);margin:0 18px 18px}}
@media(max-width:620px){.season-banner strong{display:block}.season-banner strong+strong{margin:0 0 6px}.why-details>summary{padding:22px}.why-title{font-size:25px}.why-content{padding:0 20px 20px}.why-lead{font-size:12px}.rule-chain{flex-direction:column;align-items:stretch;gap:9px;padding:20px 0}.rule-chain>span{font-size:12px}.rule-chain>i{display:none}.rule-chain b{width:27px;height:27px;font-size:16px}.why-examples{grid-template-columns:1fr;gap:17px}.example-copy h3{font-size:24px}.example-card .image-zoom img{max-height:430px}.skill-callout{padding:18px;gap:18px}.skill-levels{gap:5px;width:100%}.skill-levels>span{flex:1;min-width:0;padding:10px 5px}.skill-levels b{font-size:14px}.creator-intro{padding:22px}.creator-intro h3{font-size:29px}.creator-emblem{display:none}.season-picker{grid-template-columns:repeat(3,1fr)}.season-picker button{font-size:11px}.season-lineup{grid-template-columns:1fr;padding:22px;gap:24px}.season-lineup-copy h3{font-size:28px}.formation-tag{margin-top:12px}.position-label{font-size:7px;letter-spacing:.6px}.creator-slot p{font-size:9px}.creator-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.creator-card h4{font-size:9px;margin:8px 2px 3px}.tier-heading{gap:10px}.tier-letter{width:32px;height:35px;font-size:20px;flex-shrink:0}.tier-heading h3{font-size:14px}.tier-heading p{font-size:10px}.tier-count{display:none}.dialog-toolbar{gap:12px}.dialog-toolbar p{font-size:10px}.dialog-toolbar button{padding:8px;font-size:10px}}
.season-banner{display:flex;align-items:center;gap:15px;padding:15px 19px;border:1px solid #3f3a34;border-radius:6px;background:#211e1b;margin:0 0 29px}.season-banner>span{font-size:9px;font-weight:700;letter-spacing:1px;white-space:nowrap;background:#3c3732;color:var(--green);padding:6px 9px;border-radius:3px}.season-banner p{font-size:11px;line-height:1.7;color:#bbb0a4}.pending-art{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;border:1px dashed #4d4740;border-radius:7px;padding:25px}.pending-art>span{font-size:38px;color:var(--green);margin-bottom:15px}.pending-art strong{font-size:13px;font-weight:500}.pending-art p{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.6}@media(max-width:620px){.season-banner{align-items:flex-start;gap:12px}.season-banner p{font-size:10px}}
.battle-priority{margin-top:32px;padding:28px;border:1px solid #4f4942;border-radius:9px;background:#23211e}.priority-lead{max-width:900px;color:#c1b6a9;font-size:13px;line-height:1.85;margin-top:15px}.priority-lead strong{color:#efe3d6;font-weight:600}.priority-steps{list-style:none;padding:0;margin:25px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.priority-steps li{display:flex;gap:12px}.priority-steps li>span{color:var(--green);font-size:10px;border-top:2px solid var(--green);padding-top:9px;font-weight:700}.priority-steps h3{font-size:13px;margin:9px 0 8px}.priority-steps p{font-size:11px;line-height:1.8;color:var(--muted)}.promotion-example{border:1px solid #504942;border-radius:7px;overflow:hidden}.promotion-example>img{width:100%;aspect-ratio:5.53;object-fit:cover}.priority-note{font-size:11px;color:#beb0a0;line-height:1.8;margin:20px 0 15px}.priority-note strong{color:#e9dbca}.battle-priority>.source-link{margin-bottom:0}#dialog-image.promotion-zoom{aspect-ratio:5.53;object-fit:cover;width:1800px;max-width:100%}@media(max-width:620px){.battle-priority{padding:21px}.priority-lead{font-size:12px}.priority-steps{grid-template-columns:1fr;gap:14px}.priority-steps h3{margin-top:6px}.promotion-example>span{font-size:9px;line-height:1.7}.priority-note{font-size:10px}}
/* Keep the original overview uncluttered; explanations live in their own tab. */
.why-section{margin:0 0 45px}.why-heading{display:flex;align-items:center;justify-content:space-between;padding:25px 30px}.tabs{flex-shrink:0}.tabs #why-tab{min-width:70px}@media(max-width:620px){.tabs{gap:3px}.tabs button{font-size:10px;padding:11px 7px;white-space:nowrap}.tabs #why-tab{min-width:49px;flex:.6}.why-heading{padding:22px}}
.source-note a{text-decoration:underline;text-underline-offset:3px;color:#c4ac91}

/* Display the complete portrait in a consistent, top-aligned frame. */
.portrait,.creator-portrait{aspect-ratio:3/4;background:#1e1c19}
.portrait img,.creator-portrait>img,.slot-portrait img,.art-card img{display:block;width:100%;height:100%;object-fit:contain;object-position:center top;transform:none}
.creator-slots{align-items:start;max-width:420px;width:100%;justify-self:center}
.creator-grid,.hero-grid{align-items:start}
.slot-portrait{height:auto;aspect-ratio:3/4}
.slots{align-items:flex-start}
.art-card{background:#1e1c19}
/* Stop every hero portrait above the in-game star/progress strip. */
.portrait,.creator-portrait,.slot-portrait{aspect-ratio:4/5}
.portrait img,.creator-portrait>img,.slot-portrait img,.art-card img{width:100%;height:100%;object-fit:cover;object-position:center top;transform:none}
.art-card{height:auto;aspect-ratio:4/5}
.art-card img{position:absolute;inset:0}

#joiner-season-summary{margin:0 0 20px}

/* Prominent role and season controls. */
#guide > .section-heading{align-items:stretch;flex-direction:column;gap:26px}
.role-choice{width:100%}
.choice-label{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px;margin:0 0 12px;font-size:18px;font-weight:700;color:var(--text,#f2ede7)}
.choice-label span{font-size:13px;font-weight:400;color:#c4bdb6}
.tabs{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%;padding:8px;gap:10px;border:1px solid #655849;border-radius:12px;background:#211e1b}
.tabs button{min-height:66px;padding:18px 22px;font-size:18px;font-weight:700;border:1px solid #61564a;border-radius:8px;color:#ece6df;background:#2f2c28;white-space:normal;cursor:pointer;transition:background .15s,border-color .15s}
.tabs button[aria-selected=true]{background:var(--green);border-color:var(--green);color:#23211e;box-shadow:0 2px 12px #f2b97720}
.tabs button:hover:not([aria-selected=true]){background:#403b35;border-color:var(--green)}
.season-choice-label{margin-top:26px}
.season-picker{gap:12px;margin:0 0 20px}
.season-picker button{min-height:60px;padding:16px 12px;font-size:18px;font-weight:700;color:#eae3db;background:#2f2c28;border:1px solid #655849;border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s}
.season-picker button:hover:not([aria-pressed=true]){background:#403b35}
.tabs button:focus-visible,.season-picker button:focus-visible{outline:3px solid var(--green);outline-offset:4px}
@media(max-width:620px){.tabs{gap:6px;padding:6px}.tabs button{font-size:14px;min-height:70px;padding:12px 7px;white-space:normal}.tabs #why-tab{min-width:0}.season-picker{gap:8px}.season-picker button{font-size:16px;min-height:56px}.choice-label{font-size:17px}.choice-label span{font-size:12px}}

.hero-note-button{display:inline-flex;align-items:center;min-height:32px;margin-top:7px;padding:4px 8px;border:1px solid #aa9754;border-radius:5px;background:#3b3523;color:#f4dfa0;font-size:12px;cursor:pointer}
.hero-note-button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.hero-note-popover{max-width:380px;width:calc(100vw - 40px);margin:auto;padding:24px;border:1px solid #aa9754;border-radius:12px;background:#272421;color:#f4eee8;box-shadow:0 15px 70px #0009}
.hero-note-popover strong{font-size:18px}.card-caption .hero-note-popover p{font-size:15px;line-height:1.65;text-transform:none;color:#e8e2dc;margin:12px 0;letter-spacing:normal}
.hero-note-popover button{padding:8px 16px;background:var(--green);color:#23211e;border:0;border-radius:5px;cursor:pointer}
.hero-note-popover::backdrop{background:#0005}

/* Remove the dark screenshot margins on the seven supplied seasonal cards. */
.portrait img[src*="/season-5-6/"]:not([src$="/Lee.png"]),.creator-portrait>img[src*="/season-5-6/"]:not([src$="/Lee.png"]){width:108%;max-width:none;height:104%;margin-left:-4%;object-fit:fill;object-position:center top;transform:translateY(-3.8461538%)}

/* Size the joiner rule panel to its shorter content. */
.formation{min-height:0;padding:22px 30px;align-items:center;gap:24px}
.formation-footnote{margin-top:12px}
@media(max-width:620px){.formation{padding:20px;gap:24px}}

:root{--green:#ffb55c}.primary:hover{filter:brightness(1.12)}

/* Semantic ratings stay distinct from the site's amber brand accent. */
:root{--rating-best:#70df94;--rating-okay:#f2d366;--rating-avoid:#ff8888}
.group.best{--rating:var(--rating-best);--rating-bg:#14231a}
.group.okay{--rating:var(--rating-okay);--rating-bg:#262216}
.group.avoid{--rating:var(--rating-avoid);--rating-bg:#291a1a}
#hero-groups .group{padding:20px;border:1px solid var(--rating);border-left:5px solid var(--rating);border-radius:10px;background:var(--rating-bg)}
#hero-groups .group-heading h3{color:var(--rating);font-size:17px;font-weight:700}
#hero-groups .group .group-icon{width:28px;height:28px;background:var(--rating);color:#161b17;font-size:16px;font-weight:800}
#hero-groups .group-heading p{color:#d2d3cd}
#hero-groups .group .hero-card{border:1px solid var(--rating);background:#181b19}
#hero-groups .group .hero-card:hover{border-color:var(--rating);box-shadow:0 0 0 1px var(--rating)}
#hero-groups .group .status-icon{background:var(--rating);color:#182017}
#hero-groups .group .card-caption>p{color:var(--rating);font-weight:700}
.dot.best{background:var(--rating-best)}.dot.okay{background:var(--rating-okay)}.dot.avoid{background:var(--rating-avoid)}
.filters [data-filter=best]{color:var(--rating-best)}.filters [data-filter=okay]{color:var(--rating-okay)}.filters [data-filter=avoid]{color:var(--rating-avoid)}
.filters [data-filter=best].active{border-color:var(--rating-best);background:#14231a}.filters [data-filter=okay].active{border-color:var(--rating-okay);background:#262216}.filters [data-filter=avoid].active{border-color:var(--rating-avoid);background:#291a1a}
@media(max-width:620px){#hero-groups .group{padding:14px 10px;border-left-width:4px}#hero-groups .group-heading h3{font-size:16px}.group-heading p{margin-left:36px}}

/* Creator tiers use the same framed treatment as joiner recommendations. */
.creator-tier.tier-s{--rating:var(--rating-best);--rating-bg:#14231a}
.creator-tier.tier-a{--rating:#79b8ff;--rating-bg:#172330}
.creator-tier.tier-b{--rating:#9aa6b5;--rating-bg:#22262c}
#creator-tier-results .creator-tier{padding:20px;border:1px solid var(--rating);border-left:5px solid var(--rating);border-radius:10px;background:var(--rating-bg)}
#creator-tier-results .tier-heading h3{color:var(--rating);font-size:17px;font-weight:700}
#creator-tier-results .tier-letter{background:var(--rating);color:#182017}
#creator-tier-results .tier-heading p,#creator-tier-results .tier-count{color:#d2d3cd}
#creator-tier-results .creator-card{border-color:var(--rating);background:#181b19}
@media(max-width:620px){#creator-tier-results .creator-tier{padding:14px 10px;border-left-width:4px}#creator-tier-results .tier-heading h3{font-size:16px}}
.analytics-settings{border:0;background:none;color:var(--muted);font-size:11px;padding:8px;cursor:pointer}.analytics-settings:hover{color:var(--text)}
.analytics-consent[hidden]{display:none}.analytics-consent{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:50;width:min(900px,calc(100% - 32px));padding:20px;background:#202124;border:1px solid #595b60;border-radius:10px;box-shadow:0 8px 35px #0009;display:flex;gap:24px;align-items:center}.analytics-consent h2{font-family:inherit;font-size:17px;margin-bottom:8px}.analytics-consent p{font-size:12px;line-height:1.6;color:#ddd}.analytics-consent details{margin-top:8px;font-size:12px}.analytics-consent summary{cursor:pointer;color:var(--green)}.analytics-consent details p{margin-top:8px}.analytics-consent a{text-decoration:underline}.analytics-actions{display:flex;gap:10px;flex-shrink:0}.analytics-actions button{padding:12px;border:1px solid #ffb55c;border-radius:5px;background:#2b2721;color:#ffcf96;font-weight:600;font-size:12px}@media(max-width:700px){.analytics-consent{flex-direction:column;align-items:stretch;gap:14px;max-height:70vh;overflow:auto}.analytics-actions button{flex:1}}