.brawl-page{--brawl-purple:#d98a2b;background:#fffaf1}.brawl-intro{width:100%;padding:28px clamp(20px,5vw,72px) 42px;text-align:center}.brawl-intro h1{margin:18px auto 12px;font:800 clamp(50px,6vw,78px)/1 Manrope,sans-serif;letter-spacing:-4px}.brawl-intro h1:after{content:".";color:#98c7d8}.brawl-intro p{max-width:780px;margin:auto;color:var(--muted);font-size:16px;line-height:1.7}.brawl-maker{border-top:5px solid var(--brawl-purple)}.brawl-maker .text-unranked{min-height:340px}.brawl-presets,.brawl-guide{padding:95px max(20px,7vw)}.brawl-presets{background:#f2eee4;border-block:1px solid var(--line)}.section-heading{max-width:900px;margin:0 auto 42px;text-align:center}.section-heading h2{margin:15px 0 12px;font:800 clamp(36px,4.5vw,57px)/1.07 Manrope,sans-serif;letter-spacing:-3px}.section-heading p{max-width:720px;margin:auto;color:var(--muted);font-size:14px;line-height:1.7}.preset-grid{max-width:1300px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.preset-grid article{display:flex;flex-direction:column;min-height:280px;padding:25px;border:1px solid var(--line);border-radius:14px;background:#fff}.preset-grid article:nth-child(1){border-top:5px solid #db7f73}.preset-grid article:nth-child(2){border-top:5px solid #9b84d3}.preset-grid article:nth-child(3){border-top:5px solid #78b8c8}.preset-grid article:nth-child(4){border-top:5px solid #d6af68}.preset-grid article>span{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#a96512}.preset-grid h3{margin:15px 0 10px;font:800 20px/1.25 Manrope,sans-serif}.preset-grid p{margin:0 0 24px;color:var(--muted);font-size:13px;line-height:1.65}.preset-grid button{margin-top:auto;padding:13px;border:0;border-radius:7px;background:#c2f564;font-weight:800;cursor:pointer}.brawl-guide{max-width:1300px;margin:auto}.guide-block{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.4fr);gap:60px;padding:58px 0;border-top:1px solid var(--line)}.guide-block>div:first-child b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#eee6ff;color:#a96512;font-size:11px}.guide-block h2{margin:18px 0 0;font:800 clamp(29px,3vw,42px)/1.12 Manrope,sans-serif;letter-spacing:-2px}.guide-block>div:last-child>p{margin:0 0 16px;color:#59635d;font-size:15px;line-height:1.8}.mode-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mode-cards section{padding:22px;border:1px solid var(--line);border-radius:12px;background:#fff}.mode-cards h3{margin:0 0 10px;font:800 17px Manrope,sans-serif}.mode-cards p{margin:0;color:#59635d;font-size:13px;line-height:1.7}.brawl-faq,.brawl-cta{margin-top:30px}.brawl-cta .cta-button-lime{color:#fff}.brawl-cta .cta-button-light{color:var(--ink)}@media(max-width:1000px){.preset-grid{grid-template-columns:repeat(2,1fr)}.guide-block{grid-template-columns:1fr;gap:25px}.mode-cards{grid-template-columns:1fr}}@media(max-width:700px){.brawl-intro{padding-top:24px}.brawl-intro h1{font-size:45px;letter-spacing:-2.5px}.brawl-maker{margin-inline:10px}.brawl-presets,.brawl-guide{padding:72px 18px}.preset-grid{grid-template-columns:1fr}.section-heading h2{font-size:38px;letter-spacing:-2px}.guide-block{padding:42px 0}}
/* Visual image editor */
.brawl-page .maker-shell{border-top:5px solid var(--brawl-purple)}
.brawl-page .unranked-zone{height:390px;max-height:390px;overflow-y:auto;align-content:start}
.brawl-page .rank-image{background:#eef4f2;object-fit:contain}
.brawl-page .rank-item{width:76px;height:92px;margin:0;display:grid;grid-template-rows:76px 12px;flex:0 0 76px;align-items:start;gap:3px;overflow:hidden}
.brawl-page .rank-item .rank-image{grid-row:1;display:block;width:76px;height:76px}
.brawl-page .rank-item-name{grid-row:2;display:block;width:76px;height:12px;overflow:hidden;color:#59635d;font-size:9px;font-weight:700;line-height:12px;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.brawl-page .tier-dropzone,.brawl-page .unranked-zone{align-items:flex-start}
.brawl-data-note{padding:80px max(20px,7vw);background:#f2eee4}.brawl-data-note>div{max-width:1000px;margin:auto}.brawl-data-note h2{font:800 clamp(34px,4vw,50px)/1.08 Manrope}.brawl-data-note p{color:var(--muted);line-height:1.75}.brawl-data-note dl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.brawl-data-note dl div{padding:18px;border:1px solid var(--line);border-radius:10px;background:#fff}.brawl-data-note dt{font-size:9px;font-weight:800;text-transform:uppercase;color:#a96512}.brawl-data-note dd{margin:7px 0 0;font-weight:700}@media(max-width:700px){.brawl-data-note dl{grid-template-columns:1fr}}
.brawl-breadcrumb{margin:0 0 28px;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:9px;color:var(--muted);font-size:12px;text-align:left}.brawl-breadcrumb a{color:inherit}.brawl-trust{margin:18px auto 0;display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.brawl-trust span{padding:7px 11px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:11px;font-weight:800}.brawl-page .title-field small{display:block;margin-top:5px;color:var(--muted);font-size:9px}.brawl-tier-picker{width:min(420px,calc(100% - 32px));padding:0;border:0;border-radius:14px;box-shadow:0 24px 70px rgba(23,32,27,.28)}.brawl-tier-picker::backdrop{background:rgba(23,32,27,.55)}.brawl-tier-picker form{padding:24px}.brawl-tier-picker h2{margin:0 0 16px;font:800 20px Manrope}.brawl-tier-picker #brawl-tier-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.brawl-tier-picker #brawl-tier-options button{min-height:50px;border:0;border-radius:8px;background:var(--tier);font:800 14px Manrope}.brawl-tier-picker form>button{width:100%;margin-top:12px;padding:11px;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:700}
.brawl-page{--brawl-gold:#d98a2b;--brawl-blue:#2d84c6;background:#fffaf1}
.brawl-hero-seo-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brawl-hero-portraits{display:flex;align-items:flex-end;justify-content:center;gap:6px;margin:24px auto 0;height:92px}.brawl-hero-portraits img{width:68px;height:68px;object-fit:contain;border:3px solid #fff9e9;border-radius:14px;background:#fff2cf;box-shadow:0 8px 16px rgba(88,48,14,.18);filter:drop-shadow(0 5px 3px rgba(88,48,14,.1))}.brawl-hero-portraits img:nth-child(2){width:84px;height:84px;margin-bottom:7px}.brawl-hero-portraits img:nth-child(3){transform:rotate(4deg)}.brawl-hero-portraits img:nth-child(4){width:58px;height:58px;transform:rotate(-7deg)}
.brawl-intro h1:after{color:var(--brawl-gold)}
.brawl-page .maker-shell{border-top-color:var(--brawl-gold)}
.brawl-page .rank-image{background:#fff2cf;object-fit:contain}
.brawl-page .unranked-zone{height:390px;max-height:390px;overflow-y:auto;align-content:start}
.brawl-trust span:nth-child(3){border-color:#f0c46b;background:#fff7df}
.brawl-library-controls{margin:14px 0 12px}.brawl-search{height:42px;padding:0 11px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;background:#fff}.brawl-search svg{width:16px;flex:0 0 16px;fill:none;stroke:#59635d;stroke-width:1.8}.brawl-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:500 12px DM Sans}.brawl-search input::placeholder{color:#89918c}.brawl-filter-meta{min-height:18px;margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:9px}.brawl-filter-meta button{padding:0;border:0;background:transparent;color:#a96512;font:700 9px DM Sans;cursor:pointer}.brawl-filter-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#9ca29e;pointer-events:none}.brawl-filter-empty span{font-size:23px}.brawl-filter-empty p{margin:5px 0;font-size:10px}.brawl-page .rank-item[hidden],.brawl-page .brawl-filter-empty[hidden]{display:none!important}
.brawl-meta{padding:84px max(20px,7vw);background:#17231d;color:#fff}
.brawl-meta-heading{max-width:900px;margin:0 auto 38px;text-align:center}
.brawl-meta-heading h2{margin:15px 0 12px;font:800 clamp(34px,4.4vw,56px)/1.06 Manrope,sans-serif;letter-spacing:-3px}
.brawl-meta-heading p{max-width:780px;margin:auto;color:#c8d3cc;font-size:14px;line-height:1.75}
.brawl-meta-heading a{color:#f5c660}
.brawl-meta-grid{max-width:1250px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.brawl-meta-card{min-height:170px;padding:22px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(255,255,255,.07)}
.brawl-meta-card h3{margin:0 0 11px;font:800 22px Manrope,sans-serif}
.brawl-meta-card h3 span{display:block;margin-top:3px;color:#c8d3cc;font:700 10px/1.4 DM Sans,sans-serif;letter-spacing:1px;text-transform:uppercase}
.brawl-meta-card p{margin:0;color:#edf3ee;font-size:13px;line-height:1.7}
.brawl-meta-card[data-tier="S+"]{border-top:4px solid #f6bf4e}.brawl-meta-card[data-tier="S"]{border-top:4px solid #ff7d6d}.brawl-meta-card[data-tier="A"]{border-top:4px solid #ffbd62}.brawl-meta-card[data-tier="B"]{border-top:4px solid #f4dc68}.brawl-meta-card[data-tier="C"]{border-top:4px solid #91d0a3}.brawl-meta-card[data-tier="D"]{border-top:4px solid #81b9d3}
.brawl-meta-note{max-width:1250px;margin:22px auto 0;color:#c8d3cc;font-size:12px;line-height:1.7}
.brawl-how .guide-block>div:first-child b{background:#fff1d4;color:#a96512}
.brawl-related{padding:76px max(20px,7vw);background:#f2eee4;border-block:1px solid var(--line)}
.brawl-related>div{max-width:1250px;margin:auto}
.brawl-related h2{margin:15px 0 28px;font:800 clamp(34px,4vw,50px)/1.08 Manrope,sans-serif;letter-spacing:-2px}
.brawl-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.brawl-related-grid a{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-decoration:none}
.brawl-related-grid a:hover{border-color:#d98a2b;transform:translateY(-2px)}
.brawl-related-grid strong{font:800 17px Manrope,sans-serif}.brawl-related-grid span{color:var(--muted);font-size:12px;line-height:1.55}
@media(max-width:1000px){.brawl-meta-grid{grid-template-columns:repeat(2,1fr)}.brawl-related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.brawl-meta{padding:70px 18px}.brawl-meta-grid,.brawl-related-grid{grid-template-columns:1fr}.brawl-meta-heading h2,.brawl-related h2{letter-spacing:-2px}.brawl-related{padding:65px 18px}}