/* Hero catalogue: shared storefront chrome, collectible cards, readable guides. */
.heroes-page { font-size:16px; }
.heroes-page .wrap { width:min(1200px,calc(100% - 64px)); }
.heroes-page .hi { width:22px;height:22px;display:inline-block;flex-shrink:0;vertical-align:middle; }
.heroes-page .diamond-icon { width:22px;height:22px;display:inline-block;vertical-align:middle;flex-shrink:0; }
.heroes-page .nav [aria-current=page] { color:var(--cyan);border-bottom:2px solid var(--cyan); }
.heroes-page .nav { font-size:14px; }
.hero-main { padding-top:24px;padding-bottom:48px; }
.heroes-page .breadcrumbs { font-size:13px;margin-bottom:20px;flex-wrap:wrap; }
.eyebrow { color:#89dcf0;letter-spacing:2.2px;font-size:11px;font-weight:700; }
.catalog-intro { display:flex;align-items:center;justify-content:space-between;min-height:232px;padding:5px 30px 24px 0;position:relative; }
.catalog-intro::before { content:"";position:absolute;inset:-35px -32px 0;z-index:-1;background:linear-gradient(90deg,#050f1a 30%,#050f1a94),url('/assets/mlbb-heroes.webp') center 34%/cover;opacity:.35; }
.catalog-intro h1 { font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-1.8px;margin:15px 0; }
.intro-text { color:#bbcede;font-size:17px;line-height:1.65; }
.intro-emblem { width:250px;position:relative;padding:24px;border-top:1px solid #487589;border-bottom:1px solid #487589;transform:rotate(-6deg);text-align:center;color:#d2e4eb;background:linear-gradient(130deg,#0a2c3cdd,#131b2fcc); }
.intro-emblem::before,.intro-emblem::after { content:"";position:absolute;inset:6px;border:1px solid #416079;pointer-events:none; }
.intro-emblem::after { inset:-8px 12px;transform:rotate(8deg);opacity:.3; }
.intro-emblem span { font-size:12px;letter-spacing:6px; }
.intro-emblem strong { display:block;font:600 45px/1.4 'Cormorant Garamond',serif;letter-spacing:5px; }
.intro-emblem small { display:block;font-size:9px;letter-spacing:2px;color:#8aa7be; }
.intro-emblem .hi { margin-top:18px;width:35px;height:35px;color:#a6bdcf; }
.catalog-layout { display:grid;grid-template-columns:214px minmax(0,1fr);gap:24px;align-items:start; }
.search-row { grid-column:1/-1;display:flex;gap:12px; }
.hero-search { display:flex;align-items:center;gap:14px;background:#0b1c2b;border:1px solid #487489;border-radius:8px;padding:0 18px;flex:1;min-width:0; }
.hero-search .hi { color:#afc9d8; }
.hero-search input { background:transparent;border:0;min-height:54px;padding:12px 0;width:100%;min-width:0;outline-offset:5px; }
.hero-search:focus-within { border-color:var(--cyan); }
.filter-toggle { display:none; }
.hero-filters { border:1px solid #203e51;padding:20px 16px;background:#07131f; }
.hero-filters fieldset { padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid #25445d; }
.hero-filters legend { font-size:15px;font-weight:800;margin-bottom:14px; }
.filter-option { display:flex;align-items:center;gap:10px;min-height:42px;font-size:14px;cursor:pointer; }
.filter-option input { width:17px;height:17px;accent-color:#45d8fa;flex-shrink:0; }
.filter-option .hi { width:21px;height:21px; }
.role-tank { --class-color:#90bfdf; }.role-fighter { --class-color:#df8674; }.role-assassin { --class-color:#b996df; }
.role-mage { --class-color:#85b9ef; }.role-marksman { --class-color:#dbb25d; }.role-support { --class-color:#8dcbb8; }
.filter-option .hi { color:var(--class-color); }
.tier-options { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.tier-options label { cursor:pointer; }
.tier-options label>span { display:grid;place-items:center;min-height:45px;border:1px solid #65758a;border-radius:5px;font:600 25px 'Cormorant Garamond',serif; }
.tier-options label:nth-child(-n+2)>span { border-color:#938058;color:#e2c47f; }
.tier-options input:checked+span { background:#16445b;box-shadow:inset 0 0 0 2px var(--cyan);color:#fff;border-color:var(--cyan); }
.tier-options input:focus-visible+span { outline:3px solid var(--cyan);outline-offset:3px; }
.muted-link { display:inline-block;color:#98cfe1;text-decoration:underline;text-underline-offset:4px;font-size:12px;margin-top:15px; }
.price-filter { display:block;font-size:14px;font-weight:700; }
.price-filter select { margin-top:10px;width:100%; }
.heroes-page select { min-height:42px;background:#091b29;border:1px solid #355168;border-radius:5px;padding:8px 28px 8px 10px;color:#e0eaf4;font:inherit;font-size:13px;max-width:100%; }
.filter-note { font-size:12px;color:#92abbc;line-height:1.65;margin:18px 0; }
.reset-filters { font-size:13px;color:#b1e8f8;border:0;border-bottom:1px solid #517b8d;background:transparent;padding:8px 0;min-height:40px; }
.results-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px; }
.results-heading>p { font-size:18px;font-weight:800; }
.hero-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px; }
.hero-tile { border:1px solid #203f53;border-radius:9px;background:radial-gradient(ellipse at 50% 15%,#20365065,transparent 65%),#071521;padding:24px 23px 16px;min-width:0; }
.card-link { display:block;max-width:312px;margin:0 auto 30px;perspective:1200px; }
/* Material lives in the reviewed printed plate, generated from a reusable tier master. */
.trading-card { position:relative;border-radius:4%;isolation:isolate;transform:rotate(-2deg);transition:transform .35s;filter:drop-shadow(2px 4px 2px #0009) drop-shadow(5px 14px 13px #0009); }
.hero-tile:nth-child(even) .trading-card { transform:rotate(2deg); }
.card-link:hover .trading-card,.card-link:focus-visible .trading-card { transform:rotate(0) translateY(-5px); }
.printed-card-image { display:block;width:100%;height:auto;aspect-ratio:5/7;border-radius:4%; }
.foil-light { position:absolute;inset:0;pointer-events:none;border-radius:4%;display:none; }
/* The plate itself is the luminance mask: flecks, embossing and ink catch light,
   while dark paper remains dark. Never replace the actual print with a gradient. */
.printed-card:is(.tier-B,.tier-A,.tier-S,.tier-Splus) .foil-light { display:block;mask-image:var(--card-surface);mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat;mix-blend-mode:screen;background-size:330% 100%;animation:foil-reflection 6.5s ease-in-out infinite; }
.tier-B .foil-light { background-image:linear-gradient(115deg,transparent 36%,#b1cfe633 44%,#fff9 49%,#d6e8f533 54%,transparent 62%);opacity:.65; }
.tier-A .foil-light { background-image:linear-gradient(115deg,transparent 36%,#e5d6ff55 44%,#fff9 49%,#c6efff55 54%,transparent 62%);opacity:.7; }
.tier-S .foil-light { background-image:linear-gradient(115deg,transparent 36%,#f4c46d55 44%,#fff0c7cc 49%,#e0ae5a66 54%,transparent 62%);opacity:.75; }
.tier-Splus .foil-light { background-image:linear-gradient(115deg,transparent 30%,#ffc56d00 37%,#ffbd7b88 43%,#f49fff99 47%,#a9e4ffcc 49%,#fff0c7 51%,#d5ffae99 53%,#ffd08466 57%,transparent 65%);opacity:.85; }
@keyframes foil-reflection { 0%,12% { background-position:140% 0; } 85%,100% { background-position:-40% 0; } }
.motion-paused .foil-light { animation-play-state:paused!important; }
/* Catalogue cards stay static until deliberate mouse/keyboard interaction.
   Do not resolve image masks for idle cards: CSS masks bypass img lazy loading. */
.hero-grid .trading-card { filter:none;box-shadow:3px 9px 15px #0009; }
.hero-grid .printed-card .foil-light { display:none;mask-image:none;animation:none; }
@media (hover:hover) and (pointer:fine) {
  .hero-grid .card-link:is(:hover,:focus-visible) .printed-card:is(.tier-B,.tier-A,.tier-S,.tier-Splus) .foil-light { display:block;mask-image:var(--card-surface);animation:foil-reflection 6.5s ease-in-out infinite; }
}
.detail-tier.tier-Splus { border-color:#c7984a;color:#ffe1a1;background:#49331a55; }
.catalog-motion { display:block;margin:22px 0 0; }
@media (hover:none), (pointer:coarse) { .catalog-motion { display:none; } }
.tile-heading { display:flex;align-items:baseline;justify-content:space-between;gap:8px; }
.tile-heading h2 { font-size:22px;letter-spacing:-.5px; }
.english-name { font-size:12px;color:#8fa8bb; }
.role-label { text-transform:uppercase;font-size:11px;letter-spacing:1.5px;color:#9ed4e5;margin:6px 0 12px; }
.tile-description { font-size:13px;line-height:1.7;color:#a7bed0;min-height:88px; }
.hero-price { display:flex;align-items:center;gap:9px;margin:15px 0;font-size:13px;color:#a8bfd1; }
.hero-price strong { color:#e3eef6; }
.hero-button { display:flex;align-items:center;justify-content:center;gap:10px;min-height:45px;border:1px solid #62dcf5;border-radius:5px;background:linear-gradient(110deg,#2bc5ee,#4cddf6);color:#031922;font-size:14px;font-weight:800;padding:10px 18px;text-align:center; }
.hero-button:hover { color:#001018;background:#9becfc; }
.hero-button .hi { width:18px;height:18px; }
.detail-link { display:block;text-align:center;padding:12px 0 0;color:#9edbeb;font-size:12px; }
.catalog-footnote { color:#90a9bb;font-size:12px;margin:20px 0; }
.hero-empty { text-align:center;padding:70px 24px;border:1px dashed #345267; }
.hero-empty p { margin:14px 0 25px;color:#9eb6c8; }
.hero-empty button { margin:auto; }
.buy-explainer { display:flex;align-items:center;gap:24px;margin:40px 0;padding:24px;border:1px solid #30566b;background:linear-gradient(100deg,#0c2439,#091722);border-radius:8px; }
.buy-explainer>img { flex-shrink:0;object-fit:contain; }
.buy-explainer h2 { font-size:23px;margin-bottom:10px; }
.buy-explainer p { font-size:14px;line-height:1.7; }
.text-link { color:#a3e7f5;font-size:14px;white-space:nowrap; }
.muted { color:#96afc1; }
.catalog-guide { padding:15px 0 36px;border-bottom:1px solid #274357; }
.catalog-guide>h2 { margin:12px 0 28px;font-size:28px; }
.guide-columns { display:grid;grid-template-columns:repeat(3,1fr);gap:32px; }
.guide-columns h3 { font-size:16px;margin:13px 0 10px; }
.guide-columns p { font-size:14px;color:#a2b9cb;line-height:1.8; }
.guide-columns .hi { color:#86dbed;width:28px;height:28px; }
.hero-faq { padding:28px 0;scroll-margin-top:25px; }
.hero-faq>h2 { margin-bottom:20px; }
.hero-faq details { border-bottom:1px solid #294659; }
.hero-faq summary { display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;padding:20px 0;font-size:15px;font-weight:600; }
.hero-faq summary::-webkit-details-marker { display:none; }
.hero-faq summary>span { color:#9dcee0;font-size:22px;font-weight:400; }
.hero-faq details[open] summary>span { transform:rotate(45deg); }
.hero-faq details p { font-size:14px;color:#a4bacd;line-height:1.8;padding-bottom:18px;max-width:86ch; }
.hero-faq a,.hero-sources a { text-decoration:underline;text-underline-offset:4px;color:#a5dce9; }
.no-script-note { border:1px solid #395a6e;padding:20px;font-size:14px; }
.hero-detail-top { display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:80px;padding:24px 30px 50px;align-items:start; }
.hero-showcase { max-width:440px;width:100%;margin:20px auto 0;perspective:1000px; }
.hero-showcase .trading-card { transform:rotate(-3deg); }
.hero-showcase>p { text-align:center;color:#899dae;font-size:12px;margin:35px 0 8px; }
.motion-toggle { display:block;margin:auto;min-height:36px;font-size:12px;background:transparent;border:0;color:#a9cadb;text-decoration:underline;text-underline-offset:4px; }
.hero-name-row { display:flex;align-items:center;gap:22px;margin-top:14px; }
.hero-name-row h1 { font-size:clamp(36px,4.5vw,55px);letter-spacing:-1.8px; }
.detail-tier { min-width:52px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #72829a;padding:6px 10px;border-radius:5px;font:600 29px 'Cormorant Garamond',serif; }
.detail-tier small { font:600 8px Manrope,sans-serif;color:#97adbf;writing-mode:vertical-rl; }
.hero-english { font-size:16px;color:#a6c8de;margin:10px 0 22px; }
.hero-english>span { color:#9bb1c4;font-size:13px; }
.hero-lead { font-size:16px;color:#bdcddd;line-height:1.8; }
.hero-facts { display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:26px 0 15px; }
.hero-facts dt { font-size:11px;color:#91a6b8;margin-bottom:6px; }
.hero-facts dd { font-size:13px;margin:0;font-weight:600; }
.tier-date { color:#859caf;font-size:11px;margin-bottom:24px; }
.tier-date a { text-decoration:underline;text-underline-offset:3px; }
.hero-purchase { background:#0a1c2b;border:1px solid #315a70;border-radius:9px;padding:22px;scroll-margin-top:24px; }
.purchase-label { font-size:10px;letter-spacing:1.6px;color:#9bb7ca; }
.purchase-cost { display:flex;align-items:center;gap:10px;font-size:38px;font-weight:800;margin:7px 0 20px;line-height:1.2; }
.purchase-cost .diamond-icon { width:32px;height:32px; }
.purchase-cost>span { font-size:14px;font-weight:500;color:#a7c6db; }
.balance-row { display:flex;align-items:center;justify-content:space-between;gap:15px; }
.balance-row label { font-size:14px; }
.balance-row input { width:118px;min-width:0;min-height:42px;padding:7px 12px;background:#05121e;border:1px solid #43677c;border-radius:5px; }
.balance-help { color:#8ea7bc;font-size:11px;margin-top:6px; }
.package-offer { display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #28475d;padding-top:18px;margin-top:18px;font-size:14px; }
.package-offer strong { font-size:24px;white-space:nowrap; }
.package-remainder { font-size:12px;color:#8dadc0;margin:6px 0 16px; }
.buy-button { margin-top:16px;min-height:49px; }
.purchase-note { color:#8faabd;font-size:11px;line-height:1.7;margin-top:14px; }
#balance-enough { color:#b8e6d0;border-top:1px solid #2f574f;padding-top:18px;margin-top:16px;font-size:15px;line-height:1.7; }
.hero-section-nav { display:flex;flex-wrap:wrap;gap:22px;border-top:1px solid #294458;border-bottom:1px solid #294458;padding:17px 0;margin-bottom:40px; }
.hero-section-nav a { font-size:13px;color:#abd6e5;min-height:28px;display:flex;align-items:center; }
.hero-article { max-width:960px;margin:auto; }
.hero-article>section { padding:10px 0 35px;margin-bottom:20px;scroll-margin-top:24px; }
.hero-article h2 { font-size:28px;margin:10px 0 24px;letter-spacing:-.6px; }
.hero-article h3 { font-size:17px;margin-bottom:10px; }
.hero-article p { line-height:1.85;color:#acbfd0;font-size:15px; }
.pros-cons { display:grid;grid-template-columns:1fr 1fr;gap:30px; }
.pros-cons>div { border-top:1px solid #416074;padding-top:20px; }
.pros-cons ul { padding-left:19px;margin-bottom:0; }
.pros-cons li { color:#afc2d2;font-size:15px;line-height:1.8;padding-left:4px;margin-bottom:10px; }
.skill-list { display:grid;grid-template-columns:1fr 1fr;gap:26px 32px; }
.skill-list article { display:flex;align-items:flex-start;gap:18px;border-top:1px solid #213d50;padding-top:20px; }
.skill-key { display:grid;place-items:center;min-width:42px;height:42px;border:1px solid #678296;border-radius:50%;font:600 23px 'Cormorant Garamond',serif;background:#102435;color:#c1dae8; }
.hero-article .skill-type { color:#8babbd;font-size:11px;margin-bottom:5px; }
.hero-article .skill-list h3 { font-size:16px; }
.hero-article .skill-list p { font-size:14px; }
.full-stats { display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #2d4c61;border-left:1px solid #2d4c61;margin:0 0 15px; }
.full-stats>div { border-right:1px solid #2d4c61;border-bottom:1px solid #2d4c61;padding:20px; }
.full-stats dt { display:flex;align-items:center;gap:9px;font-size:13px;color:#abc0d1; }
.full-stats dd { margin:8px 0 0;font-size:28px;font-weight:700; }
.play-steps article { display:flex;gap:25px;border-top:1px solid #294357;padding:20px 0; }
.play-steps article>span { font:500 35px 'Cormorant Garamond',serif;color:#638a9e; }
.hero-article .hero-sources { background:#091926;padding:24px;border:1px solid #254356;border-radius:8px; }
.hero-sources h2 { font-size:19px; }
.hero-article .hero-sources p { font-size:12px;margin-top:12px; }
.other-hero { display:flex;align-items:center;gap:40px;justify-content:space-between;margin-top:45px;padding:25px 0;border-top:1px solid #345366; }
.other-hero p:not(.eyebrow) { max-width:60ch;font-size:14px; }
.secondary { flex-shrink:0;background:transparent;color:#a8e8f6; }
.heroes-page dialog { max-width:480px; }
.heroes-page dialog p { margin:20px 0;line-height:1.8;color:#bdcfe0;font-size:15px; }
.heroes-page .site-footer { margin-top:0; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }.heroes-page * { animation:none!important;scroll-behavior:auto!important;transition:none!important; }
  .foil-light { display:none!important; }.motion-toggle { display:none; }
}
@media (min-width:1180px) {
  .hero-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hero-tile { padding:22px 16px 16px; }
  .tile-heading { display:block; }.english-name { display:none; }
}
@media (max-width:1050px) {
  .catalog-intro::before { left:-20px;right:-20px; }
  .heroes-page .wrap { width:calc(100% - 40px); }.heroes-page .nav { gap:18px; }
  .hero-tile { padding:22px 17px 14px; }.catalog-layout { grid-template-columns:190px minmax(0,1fr);gap:20px; }
  .hero-detail-top { gap:45px;padding:20px 10px 45px; }.buy-explainer { flex-wrap:wrap; }
  .buy-explainer .text-link { margin-left:124px; }.tile-heading { display:block; }.english-name { display:none; }
}
@media (max-width:760px) {
  .catalog-intro::before { left:-16px;right:-16px; }
  .heroes-page .wrap { width:calc(100% - 32px); }.heroes-page .topbar { min-height:66px;gap:15px;flex-wrap:nowrap; }
  .heroes-page .brand { font-size:23px;gap:8px; }.heroes-page .brand img { width:29px;height:33px; }
  .heroes-page .nav { gap:16px;font-size:13px; }.heroes-page .nav a:nth-child(n+3),.heroes-page .nav button { display:none; }
  .hero-main { padding-top:18px; }.catalog-intro { padding:10px 0 28px;min-height:0; }.catalog-intro h1 { font-size:35px;letter-spacing:-1.3px; }
  .intro-emblem { display:none; }.intro-text { font-size:15px; }.desktop-break { display:none; }
  .catalog-layout { grid-template-columns:1fr;gap:18px; }.hero-filters { display:none; }.hero-filters.is-open { display:block; }
  .filter-toggle { display:flex;align-items:center;gap:7px;font-size:12px;background:#0a1f30;border:1px solid #45697f;border-radius:6px;padding:0 12px; }
  .filter-toggle .hi { width:18px;height:18px; }.hero-search { padding:0 12px;gap:9px; }.hero-search input { font-size:14px;min-height:49px; }
  .hero-filters fieldset:first-child { display:grid;grid-template-columns:1fr 1fr; }.tier-options { grid-template-columns:repeat(6,1fr); }
  .results-heading { margin-bottom:16px; }.hero-grid { gap:14px; }.hero-tile { padding:17px 11px 11px; }
  .card-link { margin-bottom:22px; }.tile-heading h2 { font-size:20px; }.tile-description { display:none; }
  .role-label { font-size:9px;min-height:27px; }.hero-price { font-size:12px;gap:6px; }.hero-price strong { display:block; }
  .hero-button { font-size:12px;padding:9px 8px; }.hero-button .hi { display:none; }.detail-link { font-size:11px; }
  .buy-explainer { padding:20px;gap:18px;margin-top:26px; }.buy-explainer>img { width:58px;height:58px; }
  .buy-explainer>div { flex:1;min-width:180px; }.buy-explainer h2 { font-size:20px; }.buy-explainer .text-link { margin:0; }
  .catalog-guide>h2 { font-size:24px; }.guide-columns { grid-template-columns:1fr;gap:24px; }.guide-columns>div { border-top:1px solid #233e51;padding-top:18px; }
  .hero-detail-top { grid-template-columns:1fr;gap:35px;padding:15px 0 35px; }.hero-showcase { width:90%;max-width:340px;margin-top:0; }
  .hero-detail-copy { min-width:0; }.hero-name-row h1 { font-size:43px; }.hero-purchase { padding:20px; }
  .hero-detail-copy .hero-button { font-size:15px; }
  .hero-section-nav { gap:12px 20px; }.hero-section-nav a { font-size:12px; }
  .hero-article h2 { font-size:25px; }.pros-cons,.skill-list { grid-template-columns:1fr;gap:24px; }.full-stats { grid-template-columns:repeat(2,1fr); }
  .full-stats>div { padding:17px; }.other-hero { display:block; }.other-hero .hero-button { margin-top:20px; }
}
@media (max-width:370px) { .hero-grid { grid-template-columns:1fr; }.hero-tile { padding:24px; }.tile-description { display:block;min-height:0; }.role-label { min-height:0; }.hero-price strong { display:inline; }.hero-button { font-size:14px; } }