/* GENERATED WRM-2 CSS. DO NOT EDIT. Use scripts/build-site-css.py. */

/* SOURCE: core/game-emoji.css */
/* WRM 2.0: native DLE game emoji presentation, shared everywhere. */
/* Shared sizes for native DLE smileys, WRM tokens, article markup and admin previews.
   Keep them independent from article image max-width/height:auto rules. */
:is(.wrm2-body,.fr-element) img:is(.emoji,.wrm2-game-emoji){display:inline-block;width:24px;height:24px;max-width:none;object-fit:contain;vertical-align:middle;margin:0 2px;aspect-ratio:1;border:1px solid var(--wrm2-line)}
:is(.wrm2-body,.fr-element) img.wrm2-game-emoji--stat,
:is(.wrm2-body,.fr-element) img.emoji[src*="/assets/icons/stats/"]{width:16px;height:16px;margin:0 1px;border:none}
.wrm2-dle-emoji-picker{width:min(620px,90vw);max-height:min(480px,70vh);min-width:230px;display:flex;flex-direction:column;border:1px solid var(--wrm2-line,#2b3839);background:var(--wrm2-panel,#172123);color:var(--wrm2-text,#e7eded)}
.wrm2-dle-emoji-tabs{display:flex;flex:none;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#1cfb8c #172123;border-bottom:1px solid #354344}
.wrm2-dle-emoji-tab{flex:1 0 auto;padding:9px 10px;border:0;border-right:1px solid #354344;border-radius:0;background:#131c1e;color:#aeb9b8;font:900 10px/1.2 Arial,sans-serif;cursor:pointer}
.wrm2-dle-emoji-tab.is-active{color:#1cfb8c;background:#1c2928;box-shadow:inset 0 -2px #1cfb8c}
.wrm2-dle-emoji-search{box-sizing:border-box;flex:none;width:100%;height:38px;min-height:38px;border:0;border-bottom:1px solid #354344;border-radius:0;background:#0d1618;color:#e7eded;padding:8px 12px;font:12px/1.3 Arial,sans-serif}
.wrm2-dle-emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(43px,1fr));gap:4px;overflow:auto;padding:8px;scrollbar-width:thin;scrollbar-color:#1cfb8c #172123}
.wrm2-dle-emoji-choice{display:grid;place-items:center;min-height:39px;padding:4px;border:1px solid #354344;border-radius:0;background:#10191b;cursor:pointer}
.wrm2-dle-emoji-choice:hover{border-color:#1cfb8c}
.wrm2-dle-emoji-choice[hidden]{display:none!important}
.wrm2-dle-emoji-choice img:is(.emoji,.wrm2-game-emoji){display:block;width:28px;height:28px;max-width:none;object-fit:contain;pointer-events:none}
.wrm2-dle-emoji-choice img.wrm2-game-emoji--stat{width:16px;height:16px}
.wrm2-dle-emoji-grid::-webkit-scrollbar{width:6px}.wrm2-dle-emoji-grid::-webkit-scrollbar-thumb{background:#1cfb8c}

.fr-box,.tox-tinymce,.mce-tinymce{position:relative}
.wrm2-wysiwyg-picker{position:absolute;z-index:1200;top:40px;right:0;width:min(620px,calc(100vw - 32px))}
.wrm2-wysiwyg-picker[hidden]{display:none!important}

/* Native DLE admin catalog subfilters: same vocabulary as Build Creator. */
.wrm2-dle-emoji-filters{display:flex;flex:none;gap:5px;overflow-x:auto;min-height:35px;padding:5px 7px;border-bottom:1px solid #354344;scrollbar-width:thin;scrollbar-color:#1cfb8c #172123}
.wrm2-dle-emoji-filters[hidden]{display:none!important}
.wrm2-dle-emoji-filter{flex:none;padding:5px 8px;border:1px solid #354344;border-radius:0;background:#10191b;color:#aeb9b8;font:900 10px/1.2 Arial,sans-serif;cursor:pointer}
.wrm2-dle-emoji-filter.is-active{border-color:#1cfb8c;color:#1cfb8c;background:#152822}
.wrm2-dle-emoji-filters::-webkit-scrollbar{height:6px}
.wrm2-dle-emoji-filters::-webkit-scrollbar-thumb{background:#1cfb8c}

/* Pixel expression assets retain sharp edges at the shared 24px inline size. */
img.wrm2-game-emoji--pixel,:is(.wrm2-creator,.wrm2-comments-form) img.wr-bc-rich-emoji--pixel{image-rendering:pixelated}


/* SOURCE: core/tokens.css */
:root{--wrm2-canvas:#0c0f10;--wrm2-canvas2:#0a0d0f;--wrm2-panel:#0e1214;--wrm2-panel2:#12181b;--wrm2-line:#263036;--wrm2-line-strong:#43515a;--wrm2-text:#c9c9c9;--wrm2-muted:#7f8e95;--wrm2-subtle:#536168;--wrm2-mint:#1cfb8c;--wrm2-cyan:#60f0ff;--wrm2-game-red:#ff1c5c;--wrm2-game-orange:#ffaa38;--wrm2-game-green:#2bff65;--wrm2-game-blue:#6093ff;--wrm2-red:var(--wrm2-game-red);--wrm2-yellow:#ffbc00;--wrm2-purple:#a56cff;--wrm2-sidebar:248px;--wrm2-side-small:72px;--wrm2-bar:60px;--wrm2-font:Consolas,'IBM Plex Mono','Cascadia Code','JetBrains Mono',monospace;--wrm2-champion-link-type:900 11px/1.25 var(--wrm2-font);--wrm2-display:'Arial Black','Segoe UI Black','Arial',sans-serif}


/* SOURCE: core/base.css */
.wrm2-skip{position:absolute;left:-9999px;top:6px;z-index:200;background:#1cfb8c;color:#06170e;padding:8px 12px}
.wrm2-skip:focus{left:8px}
html{scrollbar-color:var(--wrm2-mint) var(--wrm2-panel2);scrollbar-width:thin}
.wrm2-body {
    scrollbar-color: var(--wrm2-mint) var(--wrm2-panel2);
    scrollbar-width: thin;
    margin: 0;
    min-width: 320px;
    color: var(--wrm2-text);
    background: var(--wrm2-canvas);
    font: 14px / 1.6 var(--wrm2-font);
    text-rendering: optimizeLegibility;
    cursor: url(../../ui/cursor.svg), auto;
}
html::-webkit-scrollbar,.wrm2-body::-webkit-scrollbar{width:10px;height:10px;border-radius:0}
html::-webkit-scrollbar-track,.wrm2-body::-webkit-scrollbar-track{background:var(--wrm2-panel2);box-shadow:inset 0 0 6px #0005;border-radius:0}
html::-webkit-scrollbar-thumb,.wrm2-body::-webkit-scrollbar-thumb{background-color:var(--wrm2-mint);background-image:linear-gradient(45deg,#0000004d 25%,transparent 20%,transparent 50%,#0000004d 50%,#0000004d 75%,transparent 75%,transparent);border-radius:0}
html::-webkit-scrollbar-thumb:hover,.wrm2-body::-webkit-scrollbar-thumb:hover{background-color:#75ffb7}

.wrm2-body *{box-sizing:border-box}
.wrm2-body a{color:inherit;text-decoration:none}
.wrm2-body hr{border:0;border-top:1px solid var(--wrm2-line)}
/* Controls share the WRM button typography; field inputs keep their own text styles.
   Do not reset button fonts to inherit: that overrides page tab/dropdown typography. */
.wrm2-body input,.wrm2-body select,.wrm2-body textarea{font:inherit}
.wrm2-body button{font:900 12px/1.2 var(--wrm2-font);letter-spacing:.07em;cursor:pointer}
.wrm2-body :focus-visible{outline:2px solid var(--wrm2-mint);outline-offset:3px}
.wrm2-body [hidden]{display:none!important}
.wrm2-body img{max-width:100%}
.wrm2-body h1,.wrm2-body h2,.wrm2-body h3{margin:0;line-height:1.14}

/* One site-wide dropdown model for native DLE forms and template selects. */
.wrm2-body select{display:block;width:100%;max-width:100%;min-width:0;min-height:40px;padding:8px 34px 8px 11px;border:1px solid var(--wrm2-line-strong);border-radius:0;background-color:var(--wrm2-canvas2);color:var(--wrm2-text);font:900 11px/1.2 var(--wrm2-font);letter-spacing:.07em;color-scheme:dark;cursor:pointer;transition:border-color .15s ease}
.wrm2-body select:not([multiple]):not([size]),.wrm2-body select[size="1"]{appearance:none;-webkit-appearance:none;background-image:url("../../ui/chevron-down.svg");background-position:right 11px center;background-repeat:no-repeat;background-size:14px 14px}
.wrm2-body select:is([multiple],[size]:not([size="1"])){padding-right:11px;background-image:none}
.wrm2-body select:hover:not(:disabled){border-color:var(--wrm2-muted)}
.wrm2-body select:focus{border-color:var(--wrm2-mint);box-shadow:inset 2px 0 var(--wrm2-mint)}
.wrm2-body select:disabled{cursor:not-allowed}
.wrm2-body select option,.wrm2-body select optgroup{background:var(--wrm2-canvas2);color:var(--wrm2-text)}

.wrm2-body ::selection{background:var(--wrm2-mint);color:var(--wrm2-canvas)}
.wrm2-sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}


/* SOURCE: core/layout.css */
.wrm2-app{display:grid;grid-template-columns:var(--wrm2-sidebar) minmax(0,1fr);min-height:100vh;transition:grid-template-columns .15s ease}
.wrm2-app.is-compact{grid-template-columns:var(--wrm2-side-small) minmax(0,1fr)}
.wrm2-sidebar{position:sticky;top:0;z-index:30;display:flex;flex-direction:column;height:100vh;min-width:0;border-right:1px solid var(--wrm2-line-strong);background:#07090af9}
.wrm2-brand-wrap{position:relative;min-height:90px;display:flex;align-items:center;justify-content:space-between;padding:18px 14px 18px 18px;gap:8px;border-bottom:1px solid var(--wrm2-line)}
.wrm2-brand{display:inline-flex;min-width:0;align-items:baseline;padding:0;white-space:nowrap;font:900 25px/1 var(--wrm2-display);letter-spacing:-.07em;text-transform:uppercase;color:var(--wrm2-text)!important}
.brand-meta{color:var(--wrm2-mint)}
.wrm2-brand .brand-d20{position:relative;top:5px;width:26px;height:26px;flex:0 0 26px;margin:-5px 1px -7px 2px;filter:drop-shadow(0 0 7px rgb(28 251 140 / .18))}
.wrm2-brand sup{align-self:flex-start;margin:3px 0 0 2px;font:800 10px/1 var(--wrm2-font);color:var(--wrm2-mint);letter-spacing:.09em;text-transform:uppercase}
.wrm2-sidebar .sidebar-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;min-height:24px;margin-left:auto;padding:0;border:1px solid var(--wrm2-line);background:var(--wrm2-canvas2);color:var(--wrm2-muted)}
.wrm2-sidebar .sidebar-toggle:hover{color:var(--wrm2-mint);border-color:var(--wrm2-mint)}
.wrm2-sidebar .collapse-icon{display:block;width:17px;height:17px;background:currentColor;mask:url("../../ui/panel-left.svg") center/contain no-repeat;-webkit-mask:url("../../ui/panel-left.svg") center/contain no-repeat;transition:transform 150ms ease}
.wrm2-app.is-compact .wrm2-sidebar .sidebar-toggle,.wrm2-app.is-minimised .wrm2-sidebar .sidebar-toggle{position:absolute;z-index:40;top:47px;right:-13px;margin:0;border-color:var(--wrm2-line-strong);background:var(--wrm2-panel);box-shadow:0 6px 20px #0006}
.wrm2-app.is-compact .wrm2-sidebar .collapse-icon,.wrm2-app.is-minimised .wrm2-sidebar .collapse-icon{transform:rotate(180deg)}
.wrm2-nav{flex:1;min-height:0;overflow:auto;padding:13px 0 20px;scrollbar-width:thin}
.wrm2-nav-label{display:block;margin:13px 16px 7px;color:#586970;font-size:10px;font-weight:900;letter-spacing:.18em}
.wrm2-nav-link{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:44px;padding:0 15px;color:var(--wrm2-muted)!important;border-left:2px solid transparent;font-size:12px;font-weight:800;letter-spacing:.06em;white-space:nowrap}
/* Champion class accordion, visually consistent with the existing GGLYTICS sidebar. */
.wrm2-nav-accordion{width:100%;text-align:left;background:transparent;font:inherit;cursor:pointer;outline:none;box-shadow:none;border-top:0;border-right:0;border-bottom:0}
.wrm2-nav-accordion .wrm2-nav-chevron{width:13px;height:13px;transition:transform .2s ease}
.wrm2-nav-accordion[aria-expanded="true"] .wrm2-nav-chevron{transform:rotate(180deg)}
.wrm2-nav-accordion:focus-visible{outline:none;box-shadow:none;background:var(--wrm2-panel);color:var(--wrm2-mint)!important}
.wrm2-nav-subnav{display:grid;padding:2px 0 7px 19px;background:#0c1112}
.wrm2-nav-subnav[hidden]{display:none}
.wrm2-nav-subnav a{display:flex;align-items:center;gap:11px;padding:9px 12px;color:var(--wrm2-muted);font-size:11px;font-weight:800;letter-spacing:.03em;border-left:2px solid transparent}
.wrm2-nav-subnav a img{flex:0 0 19px;width:19px;height:19px}
.wrm2-nav-subnav a:is(:hover,[aria-current="page"]){color:var(--wrm2-mint);border-left-color:var(--wrm2-mint);background:#1cfb8c0b}
.wrm2-app.is-minimised .wrm2-nav-subnav:not([hidden]){position:fixed;z-index:60;top:var(--wrm2-champion-tray-top,120px);left:var(--wrm2-side-small);display:grid;width:52px;padding:8px;gap:3px;border:1px solid var(--wrm2-mint);background:var(--wrm2-canvas2);box-shadow:0 14px 35px #0009}
.wrm2-app.is-minimised .wrm2-nav-subnav a{display:flex;justify-content:center;align-items:center;width:34px;height:34px;padding:4px;border-left:0}
.wrm2-app.is-minimised .wrm2-nav-subnav a img{width:19px;height:19px;flex:0 0 19px}
.wrm2-app.is-minimised .wrm2-nav-subnav a span{display:none}
.wrm2-app.is-minimised .wrm2-nav-subnav a:is(:hover,[aria-current="page"]){border:1px solid var(--wrm2-mint);background:#1cfb8c12}
.wrm2-app.is-minimised .wrm2-nav-accordion .wrm2-nav-chevron{display:none}
.wrm2-nav-link:hover{background:var(--wrm2-panel);color:var(--wrm2-text)!important}
.wrm2-nav-link[aria-current="page"]{border-left-color:var(--wrm2-mint);background:linear-gradient(90deg,#1cfb8c14,transparent);color:var(--wrm2-text)!important}
.wrm2-nav-link :is(img,.wrm2-change-icon){display:block;width:23px;height:23px;object-fit:contain}
.wrm2-change-icon{display:inline-block;flex:0 0 18px;width:18px;height:18px;background:currentColor;mask:center/contain no-repeat;-webkit-mask:center/contain no-repeat}
.wrm2-change-icon--buffed{mask-image:url("../../status/buffed.svg");-webkit-mask-image:url("../../status/buffed.svg")}
.wrm2-change-icon--nerfed{mask-image:url("../../status/nerfed.svg");-webkit-mask-image:url("../../status/nerfed.svg")}
.wrm2-change-icon--adjusted{mask-image:url("../../status/adjusted.svg");-webkit-mask-image:url("../../status/adjusted.svg")}
.wrm2-change-icon--reworked{mask-image:url("../../status/reworked.svg");-webkit-mask-image:url("../../status/reworked.svg")}
.wrm2-nav-link img.wrm2-nav-icon--compact{width:20px;height:20px;justify-self:center}
.wrm2-nav-pro>img{box-sizing:border-box;padding:1px}
.wrm2-nav-pill{padding:1px 5px;border:1px solid #1cfb8c55;color:var(--wrm2-mint);font-size:9px;background:#0b1c17}
.wrm2-nav-pill--new{color:var(--wrm2-cyan);border-color:#60f0ffab;background:#0d1c21}
.wrm2-status-dot{display:inline-block;width:7px;height:7px;margin-right:4px;background:var(--wrm2-mint);box-shadow:0 0 10px #1cfb8c88}
.wrm2-stage{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.wrm2-command-bar{position:sticky;top:0;z-index:25;min-height:var(--wrm2-bar);display:flex;justify-content:space-between;align-items:center;gap:14px;padding:8px 24px;background:#07090af2;border-bottom:1px solid var(--wrm2-line-strong);backdrop-filter:blur(12px)}
.wrm2-command-left,.wrm2-command-actions{display:flex;align-items:center;gap:10px;min-width:0}.wrm2-command-left{flex:0 1 540px}.wrm2-command-actions{flex:1 1 auto;justify-content:flex-end}
.wrm2-crumb{display:flex;align-items:center;gap:7px;min-width:0;color:var(--wrm2-muted);font-size:11px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrm2-crumb a{color:var(--wrm2-muted)!important}
.wrm2-crumb a:hover{color:var(--wrm2-mint)!important}
.wrm2-crumb>span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrm2-crumb>span,.wrm2-crumb b,.wrm2-crumb strong{color:var(--wrm2-text);text-transform:uppercase}
.wrm2-content{flex:1;min-width:0;width:100%;max-width:1640px;margin:0 auto;padding:26px clamp(14px,2.5vw,26px) 26px}

.wrm2-footer{width:100%;margin-top:auto;padding:28px clamp(16px,2.5vw,32px);border-top:1px solid var(--wrm2-line);background:var(--wrm2-canvas2)}
.wrm2-footer .wrm2-brand{font-size:21px;letter-spacing:-.07em}
.wrm2-footer .wrm2-brand .brand-d20{width:24px;height:24px;flex-basis:24px}
.wrm2-footer-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--wrm2-line)}
.wrm2-footer-top nav{display:flex;gap:10px 22px;flex-wrap:wrap;color:var(--wrm2-muted);font-size:11px}
.wrm2-footer-bottom{display:flex;justify-content:space-between;gap:24px;margin-top:19px;color:var(--wrm2-muted);font-size:11px;max-width:100%}
.wrm2-footer-bottom p{max-width:800px}
.wrm2-skin-switch{margin-top:20px;border:1px solid var(--wrm2-line-strong);padding:12px;display:flex;align-items:center;flex-wrap:wrap;gap:16px;color:var(--wrm2-mint);font-size:11px}
.wrm2-skin-switch select{max-width:220px}
.wrm2-mobile-nav,.wrm2-mobile-brand{display:none!important}
.wrm2-app.is-compact .wrm2-sidebar .wrm2-nav-link{grid-template-columns:1fr;justify-items:center;padding:0}
.wrm2-app.is-compact .wrm2-sidebar .wrm2-nav-link span:not(.wrm2-change-icon),.wrm2-app.is-compact .wrm2-sidebar .wrm2-nav-label,.wrm2-app.is-compact .wrm2-sidebar .wrm2-brand .brand-wr,.wrm2-app.is-compact .wrm2-sidebar .wrm2-brand .brand-meta,.wrm2-app.is-compact .wrm2-sidebar .wrm2-brand sup{display:none}
.wrm2-app.is-compact .wrm2-brand-wrap{padding:18px 8px;justify-content:center;min-height:90px}
.wrm2-app.is-compact .wrm2-sidebar .brand-d20{width:30px;height:30px;flex-basis:30px;margin:0;top:0}
.wrm2-mobile-shade{position:fixed;inset:0;z-index:27;background:#000b}
@media (min-width:751px) and (max-width:1090px){.wrm2-app:not(.is-expanded){grid-template-columns:72px minmax(0,1fr)}.wrm2-app:not(.is-expanded) .wrm2-sidebar .wrm2-nav-link{grid-template-columns:1fr;justify-items:center;padding:0}.wrm2-app:not(.is-expanded) .wrm2-sidebar .wrm2-nav-link span:not(.wrm2-change-icon),.wrm2-app:not(.is-expanded) .wrm2-sidebar .wrm2-nav-label,.wrm2-app:not(.is-expanded) .wrm2-sidebar .brand-wr,.wrm2-app:not(.is-expanded) .wrm2-sidebar .brand-meta,.wrm2-app:not(.is-expanded) .wrm2-sidebar .wrm2-brand sup{display:none}.wrm2-app:not(.is-expanded) .wrm2-brand-wrap{padding:18px 8px;justify-content:center}.wrm2-app:not(.is-expanded) .wrm2-sidebar .brand-d20{top:0;margin:0;width:30px;height:30px;flex-basis:30px}}
@media (min-width:751px) and (max-width:1090px) and (orientation:portrait){
  .wrm2-app.is-expanded .wrm2-sidebar .wrm2-nav-link{grid-template-columns:22px minmax(0,1fr) auto;gap:6px;padding-inline:10px;font-size:11px;letter-spacing:.01em}
  .wrm2-app.is-expanded .wrm2-sidebar .wrm2-nav-link :is(img,.wrm2-change-icon){width:21px;height:21px}
  .wrm2-app.is-expanded .wrm2-sidebar .wrm2-nav-pill{padding-inline:3px;font-size:8px;letter-spacing:0}
}
@media(max-width:750px){.wrm2-app{display:block}.wrm2-nav{display:flex;flex-direction:column}.wrm2-nav>*{flex-shrink:0}.wrm2-nav-pro{order:-1}.wrm2-sidebar{position:fixed;top:0;left:0;bottom:0;z-index:40;width:min(278px,83vw);height:100dvh;transform:translateX(-105%);transition:transform .2s ease}.wrm2-app.is-mobile-open .wrm2-sidebar{transform:translateX(0)}.wrm2-sidebar .wrm2-nav-link{grid-template-columns:24px minmax(0,1fr) auto;justify-items:stretch;padding:0 15px}.wrm2-sidebar .wrm2-nav-link span:not(.wrm2-change-icon),.wrm2-sidebar .wrm2-nav-label,.wrm2-sidebar .wrm2-brand .brand-wr,.wrm2-sidebar .wrm2-brand .brand-meta,.wrm2-sidebar .wrm2-brand sup{display:initial}.wrm2-sidebar .wrm2-brand-wrap{flex-direction:row;justify-content:space-between;padding:14px 15px}.wrm2-mobile-nav{display:inline-flex!important;order:99}.wrm2-mobile-brand{display:inline-flex!important;align-items:baseline;flex:0 0 auto;font-size:19px;letter-spacing:-.07em}.wrm2-mobile-brand .brand-d20{width:23px;height:23px;flex-basis:23px;top:4px;margin:-4px 1px -6px 2px}.wrm2-mobile-brand sup{font-size:8px}.wrm2-command-bar{padding:8px 13px;gap:6px}.wrm2-command-left{flex:1 1 auto;min-width:0}.wrm2-command-actions{flex:0 0 auto;gap:6px;margin-left:auto}.wrm2-crumb{display:none}.wrm2-footer-bottom{flex-direction:column;gap:8px}}
@media(max-width:350px){.wrm2-mobile-brand .brand-wr,.wrm2-mobile-brand .brand-meta,.wrm2-mobile-brand sup{display:none}.wrm2-mobile-brand .brand-d20{width:28px;height:28px;flex-basis:28px;top:0;margin:0}.wrm2-command-actions{margin-left:auto}}


/* SOURCE: core/game-icons.css */
/* WR-META 2.0 — shared game icon system (items, spells, runes, builds).
   Source geometry: NEW/STORY/anons.tpl. No legacy CSS classes or Font Awesome.
   One implementation for the entire theme; dimensions can be adjusted through
   --wrm2-game-size for local size variants when needed. */

.wrm2-game-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  isolation: isolate;
  min-width: 0;
}

.wrm2-game-icon {
  --wrm2-game-tone: #60f0ff;
  --wrm2-game-tone-outer: rgb(96 240 255 / 60%);
  --wrm2-game-size: 60px;
  position: relative;
  display: inline-flex;
  flex: 0 0 var(--wrm2-game-size);
  width: var(--wrm2-game-size);
  min-width: 0;
  margin: 14px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: help;
  z-index: 1;
  outline-offset: 3px;
}

/* Map existing DLE extra-field values to our own component tokens. */
:is(.wrm2-game-icon,.champ-rune-game-entry.is-keystone,.wrm2-rune-intro-piece):is([data-tone="red"],[data-tone$="-red"]) {
  --wrm2-game-tone: var(--wrm2-game-red);
  --wrm2-game-tone-outer: rgb(255 28 92 / 60%);
}
:is(.wrm2-game-icon,.champ-rune-game-entry.is-keystone,.wrm2-rune-intro-piece):is([data-tone="orage"],[data-tone$="-orage"],[data-tone="orange"],[data-tone$="-orange"]) {
  --wrm2-game-tone: var(--wrm2-game-orange);
  --wrm2-game-tone-outer: rgb(255 170 56 / 60%);
}
:is(.wrm2-game-icon,.champ-rune-game-entry.is-keystone,.wrm2-rune-intro-piece):is([data-tone="green"],[data-tone$="-green"]) {
  --wrm2-game-tone: var(--wrm2-game-green);
  --wrm2-game-tone-outer: rgb(43 255 101 / 60%);
}
:is(.wrm2-game-icon,.champ-rune-game-entry.is-keystone,.wrm2-rune-intro-piece):is([data-tone="blue"],[data-tone$="-blue"]) {
  --wrm2-game-tone: var(--wrm2-game-blue);
  --wrm2-game-tone-outer: rgb(96 147 255 / 60%);
}
:is(.wrm2-game-icon,.champ-rune-game-entry.is-keystone,.wrm2-rune-intro-piece):is([data-tone="white"],[data-tone$="-white"]) {
  --wrm2-game-tone: #ffffff;
  --wrm2-game-tone-outer: rgb(255 255 255 / 60%);
}

.wrm2-game-icon__frame {
  position: relative;
  display: block;
  width: var(--wrm2-game-size);
  height: var(--wrm2-game-size);
  flex: 0 0 var(--wrm2-game-size);
  padding: 1px;
  background: var(--wrm2-game-tone);
  line-height: 0;
  z-index: 1;
}
/* DLE image xfields may wrap the img in a highslide anchor (when a thumb exists).
   Preserve the one icon-frame geometry and do not activate a gallery on hover. */
.wrm2-game-icon__frame > a.highslide {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.wrm2-game-icon__frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  background: var(--wrm2-canvas2);
  vertical-align: bottom;
}

/* Two separately clipped layers reproduce the NEW-colored 1px frame. */
.wrm2-game-icon--item .wrm2-game-icon__frame,
.wrm2-game-icon--item .wrm2-game-icon__frame img {
  clip-path: polygon(20% 0,100% 0,100% 80%,80% 100%,0 100%,0 20%);
}
.wrm2-game-icon--item:where(:hover,:focus-visible) .wrm2-game-icon__frame {
  filter: brightness(1.14);
}

/* Rune: shared colored rings and exact full-size geometry in /items/ and guides.
   Keystone outer frame = 62px content + 8px padding = 70px; minors = 60px.
   Compact Community Builds/profile variants keep their separate, existing sizes. */
.wrm2-game-icon--rune {
  --wrm2-rune-keystone-size: 62px;
  --wrm2-rune-frame-padding: 8px;
  --wrm2-rune-secondary-size: 60px;
  --wrm2-game-size: var(--wrm2-rune-keystone-size);
  --wrm2-game-tone: #cccccc;
  --wrm2-game-tone-outer: #cccccc;
  margin: 9px;
}
.wrm2-game-icon--rune .wrm2-game-icon__frame {
  box-sizing: content-box;
  width: var(--wrm2-game-size);
  height: var(--wrm2-game-size);
  flex-basis: var(--wrm2-game-size);
  padding: 4px;
  border-radius: 50%;
  background: var(--wrm2-canvas2);
}
.wrm2-game-icon--rune .wrm2-game-icon__frame img {
  border: 3px solid var(--wrm2-game-tone);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #1e222d, 0 0 0 4px var(--wrm2-game-tone-outer);
}

/* Compact guides: one frame size for items, keystone, spells and skills (52px).
   Rune rings retain the exact same component design; secondary runes use 38px
   through the context modifier below. The 64px label slot never moves a frame. */
.wrm2-game-icon--compact{--wrm2-game-size:52px;--wrm2-game-slot:64px;flex:0 0 var(--wrm2-game-slot);width:var(--wrm2-game-slot);margin:0}
.wrm2-game-icon--compact.wrm2-game-icon--rune{--wrm2-game-size:52px;margin:0}
.wrm2-game-icon--compact.wrm2-game-icon--rune .wrm2-game-icon__frame{box-sizing:border-box;width:var(--wrm2-game-size);height:var(--wrm2-game-size);flex-basis:var(--wrm2-game-size);padding:3px}
.wrm2-game-icon--compact.wrm2-game-icon--rune .wrm2-game-icon__frame img{border-width:2px;box-shadow:0 0 0 1px #1e222d,0 0 0 3px var(--wrm2-game-tone-outer)}
.wrm2-game-icon--compact .wrm2-game-icon__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;width:100%;height:31px;margin-top:5px;line-height:10.33px;overflow-wrap:anywhere;font-weight:900;letter-spacing:.005em;font-size:13px}
.wrm2-game-icon--compact .wrm2-game-icon__badge{top:0px;right:0px;padding:3px;font-size:9px}
.wrm2-game-icon__label {display:block;width:100%;margin-top:5px;color:var(--wrm2-muted);font-size:11px;line-height:1.4;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none;text-align:center;text-wrap:balance}
.wrm2-game-icon__badge {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  padding: 4px 4px;
  color: #09120d;
  background: var(--wrm2-game-tone);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  pointer-events: none;
}

/* In the default flow, negative margins make connector edges touch icon frames. */
.wrm2-game-join {
  position: relative;
  z-index: 0;
  display: flex;
  flex: 0 0 35px;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin: 28px -15px 0;
  border: 1px solid var(--wrm2-mint);
  box-shadow: rgba(28, 251, 140, 0.15) 0 0 20px;
  color: var(--wrm2-mint);
  font-size: 20px;
  font-weight: 100;
  line-height: 1;
}

.wrm2-game-icon__tooltip[hidden] { display: none; }
.wrm2-game-tooltip-popover {
  position: fixed;
  z-index: 9999;
  width: min(390px,calc(100vw - 20px));
  max-height: min(70dvh,500px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px;
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--wrm2-mint) var(--wrm2-panel2);
}
/* Match the slim scrollbars used by tables and other scrollable UI Kit panels. */
.wrm2-game-tooltip-popover::-webkit-scrollbar { width: 8px; height: 8px; }
.wrm2-game-tooltip-popover::-webkit-scrollbar-track { background: var(--wrm2-panel2); }
.wrm2-game-tooltip-popover::-webkit-scrollbar-thumb { background: var(--wrm2-mint); border-radius: 0; }
.wrm2-game-tooltip-popover::-webkit-scrollbar-thumb:hover { background: #75ffb7; }
/* Restrained entrance animation shared with champion card popovers. The delay
   belongs to pointer hover handlers, not to keyboard or touch navigation. */
@keyframes wrm2-tooltip-appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.wrm2-tooltip-surface:not([hidden]){animation:wrm2-tooltip-appear 180ms cubic-bezier(.2,.7,.2,1) both}
@media(prefers-reduced-motion:reduce){.wrm2-tooltip-surface:not([hidden]){animation:none}}
.wrm2-game-tooltip-popover[hidden] { display: none; }
.wrm2-game-tooltip-content img{vertical-align:middle}
/* Inline DLE smile/stat-icon replacements retain their own intrinsic shape,
   not the wide size used by explanatory screenshots and editorial illustrations. */
.wrm2-game-tooltip-content img:is(.emoji,.smile,.smiles,.emoticon,.wrm2-inline-icon) { display:inline-block; width:24px; height:24px; max-width:none; object-fit:contain; margin-inline:2px; }
.wrm2-game-tooltip-content img.wrm2-game-emoji--stat { width:16px; height:16px; margin-inline:1px; }
.wrm2-game-skill-description{display:flow-root;min-width:0}
.wrm2-game-tooltip-popover .wrm2-game-skill-description{margin-top:10px}
/* Skill illustrations share the 40px visual size requested for ability icons, floated left beside the
   ability text. Only the large illustrated icons use these rules; inline DLE
   icons retain their shared 24px/16px game-emoji treatment above. */
.wrm2-game-skill-description img.wrm2-game-skill-illustration{float:left;clear:left;display:block;width:40px;height:40px;max-width:none;object-fit:cover;box-sizing:border-box;margin:2px 15px 9px 0;border:1px solid var(--wrm2-skill-illustration-border,var(--wrm2-mint));vertical-align:top}
/* All ability resources use the shared visual heading, with no label/value wraps.
   Rare extremely long values can scroll horizontally instead of breaking. */
.wrm2-game-tooltip-popover .wrm2-game-skill-resources{display:flex;flex-wrap:nowrap;align-items:baseline;gap:15px;max-width:100%;overflow-x:auto;white-space:nowrap;scrollbar-width:thin;font-style:normal}
.wrm2-game-tooltip-popover .wrm2-game-skill-cost{display:inline-flex;align-items:baseline;flex:none;gap:5px;white-space:nowrap;font-style:normal}
.wrm2-game-tooltip-popover .wrm2-game-skill-cost .cdr{flex:none}

@media (max-width: 380px) {
  .wrm2-game-icon:not(.wrm2-game-icon--compact):not(.wrm2-cb-skill):not(.wrm2-game-icon--rune) { --wrm2-game-size: 51px; margin: 10px; }
  .wrm2-game-join { width: 29px; height: 29px; flex-basis: 29px; margin: 21px -11px 0; }
}

/* Canonical SKILL PRIORITY frame: shared by community cards and Full Story abilities. */
.wrm2-cb-skill{--skill-color:var(--wrm2-yellow);position:relative;display:grid;place-items:center;width:100%;max-width:52px;aspect-ratio:1/1;height:auto;min-width:0;min-height:0;overflow:hidden;border:1px solid var(--skill-color);background:var(--wrm2-canvas);box-sizing:border-box;margin:0;cursor:help}
.wrm2-cb-skill[data-skill="W"]{--skill-color:var(--wrm2-mint)}
.wrm2-cb-skill[data-skill="E"]{--skill-color:var(--wrm2-cyan)}
.wrm2-cb-skill img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.wrm2-cb-skill>.wrm2-cb-skill-key{position:absolute;right:-1px;top:-1px;padding:2px 4px;background:#060d0c;border:1px solid var(--skill-color);color:var(--skill-color);font:900 11px/1 var(--wrm2-font)}

.wrm2-cb-skill[data-skill="P"]{--skill-color:var(--wrm2-purple)}
.wrm2-cb-skill[data-skill="R"]{--skill-color:var(--wrm2-red)}


/* SOURCE: core/components.css */
.wrm2-icon-btn{width:38px;height:38px;flex:0 0 38px;display:inline-flex;align-items:center;justify-content:center;padding:7px;border:1px solid var(--wrm2-line-strong);background:var(--wrm2-canvas2);color:var(--wrm2-muted);border-radius:2px}
.wrm2-mobile-nav{border:1px solid var(--wrm2-mint)}
.wrm2-icon-btn:hover{border-color:var(--wrm2-mint)}
.wrm2-icon-btn img,.wrm2-btn img{width:17px;height:17px;object-fit:contain}
.wrm2-pill{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-height:38px;padding:0 11px;border:1px solid var(--wrm2-line);font-size:11px;font-weight:900;letter-spacing:.07em}
.wrm2-pill-pro{border-color:#f6cc71;color:#f6cc71!important}
/* One visual typography rule for the language picker, GET PRO and SIGN IN. */
.wrm2-command-label{font:900 11px/1 var(--wrm2-font);letter-spacing:.07em;text-transform:uppercase}
.wrm2-pill img{width:22px;height:22px}
.mb-0{margin-bottom:0px!important}
.mb-10{margin-bottom:10px!important}
.wrm2-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 17px;border:1px solid var(--wrm2-line-strong);border-radius:2px;color:var(--wrm2-text)!important;background:var(--wrm2-panel2);font:900 11px/1.2 var(--wrm2-font);letter-spacing:.07em;text-align:center;transition:background .16s,border .16s}
.wrm2-btn:hover{border-color:var(--wrm2-mint)!important;background:#1cfb8c15}
.wrm2-btn-primary{color:#06170e!important;background:var(--wrm2-mint);border-color:var(--wrm2-mint)}
.wrm2-btn-primary:hover{background:#75ffb7;color:#06170e!important}
.wrm2-btn-small{font-size:10px;min-height:34px;padding:6px 9px}
/* Canonical DLE 14 pagination; navigation.tpl is shared by categories, comments and lists. */
.wrm2-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;max-width:100%;min-width:0;margin:16px 0 0;color:var(--wrm2-muted);font:900 11px/1.2 var(--wrm2-font);letter-spacing:.04em}
.wrm2-pagination>div{display:flex;align-items:center;gap:6px;min-width:0}
.wrm2-pagination>div:nth-child(2){flex:1 1 280px;justify-content:center;flex-wrap:wrap}
.wrm2-pagination>div:last-child{justify-content:flex-end}
.wrm2-pagination a,.wrm2-pagination>div>span:not(.nav_ext){display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;padding:0 11px;border:1px solid var(--wrm2-line-strong);border-radius:0;background:var(--wrm2-panel);color:var(--wrm2-text);font:900 11px/1.2 var(--wrm2-font);letter-spacing:.04em;white-space:nowrap}
.wrm2-pagination a:is(:hover,:focus-visible){border-color:var(--wrm2-mint);color:var(--wrm2-mint);background:var(--wrm2-canvas2)}
.wrm2-pagination>div:nth-child(2)>span:not(.nav_ext){border-color:var(--wrm2-mint);background:var(--wrm2-mint);color:var(--wrm2-canvas)}
.wrm2-pagination>div:is(:first-child,:last-child)>span{opacity:.45}
.wrm2-pagination .nav_ext{padding:0 3px;color:var(--wrm2-muted)}
@media(max-width:760px){.wrm2-pagination>div:nth-child(2){order:-1;flex:1 1 100%}.wrm2-pagination>div:first-child,.wrm2-pagination>div:last-child{flex:1 1 auto}}
.wrm2-kicker{font-size:11px;font-weight:900;color:var(--wrm2-mint);letter-spacing:.17em}
/* WRM 2.0 tooltip design contract — game data, champion meta and timing events.
   Tooltip owners control only layout/position, not a second visual skin. */
.wrm2-tooltip-surface{border:1px solid var(--wrm2-line-strong);background:linear-gradient(145deg,#111b1ef7,#090e11fa 78%);box-shadow:0 18px 46px #000b;color:var(--wrm2-text);font:500 11px/1.65 var(--wrm2-font);font-style:normal;text-align:left}
/* Consolas has no 900-weight master. Use the shared heavy UI face and
   a consistent text color for inline tooltip emphasis. */
.wrm2-tooltip-surface :is(b,strong,.iname),.wrm2-game-tooltip-content :is(b,strong,.iname),.wrm2-legacy-editorial .wrm2-story-copy :is(b,strong,.iname),.wrm2-jungle-description :is(b,strong,.iname),.wrm2-combo-description :is(b,strong,.iname){font-weight:900;letter-spacing:.005em;color:var(--wrm2-text)}
.wrm2-tooltip-surface .iname,.wrm2-game-tooltip-content .iname{display:inline;margin:0;color:var(--wrm2-mint);font-size:13px;font-weight:900;line-height:1.3;text-transform:uppercase}
.wrm2-tooltip-surface .cdr{color:var(--wrm2-text)}
.wrm2-tooltip-surface .istats{color:var(--wrm2-text)}
.wrm2-tooltip-surface .istats2{color:var(--wrm2-cyan)}
.wrm2-tooltip-surface .goldt{color:#fff700}
.wrm2-tooltip-surface .wrm2-game-tooltip-content{color:var(--wrm2-muted);font-size:12px;line-height:1.75;overflow-wrap:anywhere}
.wrm2-tooltip-surface .wrm2-game-skill-description{font-style:normal}
.wrm2-tooltip-surface .wrm2-game-tooltip-content :is(p,ul,ol){margin:0 0 8px}
.wrm2-tooltip-surface .wrm2-game-tooltip-content :is(p,ul,ol):last-child{margin-bottom:0}
.wrm2-tooltip-surface .wrm2-game-tips{display:block;margin:10px 0 0;border-top:1px solid var(--wrm2-line-strong);padding-top:9px;color:var(--wrm2-muted)}
.wrm2-tooltip-surface .wrm2-game-tips>strong{display:block;margin:0 0 6px;color:var(--wrm2-mint);font-weight:900}

/* Meta insight badges: shared with the Full Story score explanation.
   Names and underlying thresholds come from the existing NEW CN META module. */
/* Shared chart point tooltip: identical presentation in Analytics and Full Story. */
.wrm2-chart-point-tip{display:grid;gap:7px;max-width:min(440px,calc(100% - 16px));background:var(--wrm2-panel2);border:1px solid var(--wrm2-mint);padding:9px 12px;font-size:11px;color:var(--wrm2-text);box-shadow:0 8px 30px #000a;text-align:left;pointer-events:none}
.wrm2-chart-point-tip .wrm2-chart-point-tip__date{display:block;font:900 11px/1.3 var(--wrm2-font);letter-spacing:.06em;border-bottom:1px solid var(--wrm2-line);padding-bottom:5px}
.wrm2-chart-point-tip__row{display:flex;align-items:center;gap:8px;min-width:0;font-size:11px}
.wrm2-chart-point-tip__row i{flex:none;width:9px;height:9px;background:var(--series)}
.wrm2-chart-point-tip__row .wrm2-analytics-tip-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrm2-chart-point-tip__row strong{white-space:nowrap;font:900 11px/1.3 var(--wrm2-font)}
.wrm2-chart-point-tip__tier{display:block;flex:none;width:20px;height:20px;object-fit:contain}
.wr-badge{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:27px;padding:5px 9px;border:1px solid var(--wrm2-line-strong);border-radius:0;background:var(--wrm2-panel2);color:var(--wrm2-text);font:900 11px/1.3 var(--wrm2-display);white-space:normal}
.wr-badge:is(.wr-conf-low,.wr-sig-perma,.wr-rsn-ban,.wr-rsn-low,.wr-sig-fall){border-color:#ff627b65;background:#ff315f17;color:#ff9dac}
.wr-badge:is(.wr-conf-med,.wr-rsn-pick,.wr-sig-pop){border-color:#ffc15365;background:#ffbc0012;color:#ffda93}
.wr-badge:is(.wr-conf-high,.wr-rsn-win,.wr-rsn-trend,.wr-sig-hot,.wr-sig-eff){border-color:#1cfb8c65;background:#1cfb8c10;color:var(--wrm2-mint)}
.wr-badge.wr-sig-fall{border-color:#7dbdff55;background:#60f0ff10;color:#9cceff}
/* Shared page-introduction contract, visual baseline: Items (Stage 3.473).
   Applies only to the first page heading, not nested section or hero headings.
   Optional kicker, nested text/action wrapper and class/role icon are supported. */
.wrm2-page-header{min-width:0;margin:0 0 16px}
.wrm2-page-header .wrm2-page-title{margin:0 0 13px}
.wrm2-page-header>p:not(.wrm2-kicker),.wrm2-page-header>div>p:not(.wrm2-kicker){max-width:1040px;margin:0;color:var(--wrm2-muted);font-size:13px;line-height:1.8}
.wrm2-page-header>.wrm2-kicker,.wrm2-page-header>div>.wrm2-kicker{margin:0 0 9px}
/* Shared H1 typography; story/editorial headings keep their existing contract. */
.wrm2-page-title,.wrm2-story h1,.wrm2-static-copy h1{color:var(--wrm2-text);text-transform:uppercase;font:900 clamp(22px,2.4vw,32px)/1.1 var(--wrm2-display);letter-spacing:-.028em}
.wrm2-search-dialog,.wrm2-auth-dialog{color:var(--wrm2-text);border:1px solid var(--wrm2-line-strong);background:var(--wrm2-canvas2);box-shadow:0 24px 80px #000c}
.wrm2-search-dialog::backdrop,.wrm2-auth-dialog::backdrop{background:#010606cc;backdrop-filter:blur(5px)}
.wrm2-search-dialog{width:min(680px,calc(100vw - 26px));padding:20px}
.wrm2-search-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}
.wrm2-search-header h2{font-size:14px;letter-spacing:.12em}
.wrm2-search-form{display:flex;align-items:center;gap:10px}
.wrm2-search-form .wrm2-search-modal-field{min-height:44px}
.wrm2-account{position:relative;min-width:0}
.wrm2-account-trigger{display:flex;align-items:center;gap:8px;min-height:38px;padding:4px 7px 4px 7px;background:var(--wrm2-panel);border:1px solid var(--wrm2-line-strong);color:var(--wrm2-text)}
/* Shared 2px border for user avatars sitewide. Champion and item portraits are excluded. */
.wrm2-user-avatar{box-sizing:border-box;border:2px solid var(--wrm2-user-avatar-color,var(--wrm2-mint))}
.wrm2-user-avatar[data-wrm2-user-group="0"]{--wrm2-user-avatar-color:var(--wrm2-muted)}
.wrm2-user-avatar[data-wrm2-user-group="1"]{--wrm2-user-avatar-color:var(--wrm2-red)}
.wrm2-user-avatar[data-wrm2-user-group="13"]{--wrm2-user-avatar-color:var(--wrm2-text)}
.wrm2-user-avatar[data-wrm2-user-group="11"]{--wrm2-user-avatar-color:var(--wrm2-yellow)}
.wrm2-user-avatar[data-wrm2-user-group="15"]{--wrm2-user-avatar-color:var(--wrm2-purple)}
.wrm2-user-avatar[data-wrm2-user-group="16"]{--wrm2-user-avatar-color:#67ffd1}
/* Shared circular PRO tier badge: discussion avatars and native profile popup. */
.wrm2-pro-badge,.wrm2-comment__tier{position:absolute;z-index:1;right:-5px;bottom:-5px;display:grid;place-items:center;box-sizing:border-box;width:24px;height:24px;padding:1px;border:2px solid var(--wrm2-user-avatar-color,var(--wrm2-line-strong));background:var(--wrm2-canvas2);box-shadow:0 1px 5px #0009;pointer-events:none;border-radius:50%}
.wrm2-pro-badge img,.wrm2-comment__tier img{display:block;width:20px;height:20px;object-fit:contain}
.wrm2-pro-badge--lite,.wrm2-comment__tier--lite{--wrm2-user-avatar-color:var(--wrm2-text)}
.wrm2-pro-badge--standard,.wrm2-comment__tier--standard{--wrm2-user-avatar-color:var(--wrm2-yellow)}
.wrm2-pro-badge--plus,.wrm2-comment__tier--plus{--wrm2-user-avatar-color:var(--wrm2-purple)}
.wrm2-pro-badge--big-bro,.wrm2-comment__tier--big-bro{--wrm2-user-avatar-color:#67ffd1}
.wrm2-avatar{width:30px;height:30px;object-fit:cover;border-radius:50%}
.wrm2-account-copy{min-width:0;display:grid;max-width:130px;text-align:left;line-height:1.35}
.wrm2-account-copy strong{font-size:11px;overflow:hidden;text-overflow:ellipsis}
.wrm2-account-copy small{font-size:9px;color:var(--wrm2-muted)}
.wrm2-small-icon{width:13px;height:13px}
.wrm2-account-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:80;width:240px;background:var(--wrm2-canvas2);border:1px solid var(--wrm2-line-strong);box-shadow:0 12px 35px #0008}
.wrm2-account-menu-head{display:grid;gap:3px;padding:15px;border-bottom:1px solid var(--wrm2-line)}
.wrm2-account-menu-head small{color:var(--wrm2-muted)}
.wrm2-account-menu a{display:block;padding:10px 15px;font:900 11px/1.2 var(--wrm2-font);letter-spacing:.07em;color:var(--wrm2-muted)}
.wrm2-account-menu a:hover{background:var(--wrm2-panel);color:var(--wrm2-mint)}
.wrm2-account-guest{min-height:38px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid var(--wrm2-mint);color:var(--wrm2-mint);background:#1cfb8c10;font-size:11px;font-weight:900;letter-spacing:.07em;white-space:nowrap}
.wrm2-account-guest img{width:18px;height:18px}
@media(max-width:750px){.wrm2-command-actions>.wrm2-pill-pro{display:none}.wrm2-search-form{flex-direction:column;align-items:stretch}.wrm2-search-form input{width:100%}}


/* GGLYTICS command bar: site search and admin locale picker. */
.wrm2-global-search{position:relative;flex:1 1 360px;max-width:260px;min-width:145px;height:38px;display:flex;align-items:center;border:1px solid var(--wrm2-line-strong);background:var(--wrm2-canvas2)}
.wrm2-global-search-icon{position:absolute;left:14px;top:50%;width:19px;height:19px;transform:translateY(-50%);pointer-events:none}
.wrm2-global-search input[type=search]::placeholder{color:var(--wrm2-muted);opacity:1}
/* Shared tabs, selectable states and horizontal tab links (Home, categories, Items, builds, Patch Notes and build steps). */
.wrm2-tablist{display:flex;overflow:auto;gap:0;border-bottom:1px solid var(--wrm2-line-strong);margin-bottom:20px;scrollbar-width:thin}
.wrm2-tablist :is(button,a){flex:0 0 auto;min-height:44px;padding:0 16px;border:0;border-bottom:2px solid transparent;color:var(--wrm2-muted);background:transparent;font:900 11px/1.2 var(--wrm2-font);letter-spacing:.07em;white-space:nowrap}
.wrm2-tablist :is(button,a):focus-visible{outline:2px solid var(--wrm2-mint);outline-offset:-3px}
.wrm2-tablist :is(button,a).is-selected{color:var(--wrm2-mint);border-bottom-color:var(--wrm2-mint);background:#1cfb8c0b}
.wrm2-tablist a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* One shared search surface: outline belongs to the entire field, not to the input. */
.wrm2-search-field{position:relative;display:flex;align-items:center;min-width:0;border:1px solid var(--wrm2-line-strong);background:var(--wrm2-canvas2);transition:border-color .16s ease}
.wrm2-search-field:hover{border-color:var(--wrm2-muted)}
.wrm2-search-field:focus-within{border-color:var(--wrm2-mint);outline:2px solid var(--wrm2-mint);outline-offset:2px}
.wrm2-search-field input[type=search]{flex:1 1 auto;width:100%;height:100%;min-width:0;min-height:0;padding:8px 34px 8px 12px;border:0;border-radius:0;outline:0;box-shadow:none;background:transparent;color:var(--wrm2-text);appearance:none;-webkit-appearance:none}
.wrm2-body .wrm2-search-field input[type=search]:focus-visible{outline:0;box-shadow:none}
.wrm2-search-field input[type=search]::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
.wrm2-search-field input[type=search]::-webkit-search-decoration{display:none;-webkit-appearance:none}
.wrm2-search-field input[type=search]::-ms-clear{display:none}
.wrm2-global-search input[type=search]{padding-left:42px;font:13px/1.4 var(--wrm2-font);letter-spacing:.01em}
/* The same X control is reused in global search, library searches, dialogs and notifications. */
.wrm2-close-button{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 30px;padding:6px;border:1px solid transparent;border-radius:0;background:transparent;color:var(--wrm2-muted);cursor:pointer}
.wrm2-close-button:hover,.wrm2-close-button:focus-visible{color:var(--wrm2-mint)}
.wrm2-close-button img,.wrm2-close-button svg{display:block;width:17px;height:17px;object-fit:contain}
/* Shared framed X for WRM modals (same icon and outline as comments). */
/* Shared framed close control for custom dialogs and native DLE jQuery UI dialogs. */
.wrm2-modal-close,.wrm2-body .ui-dialog-titlebar-close.wrm2-close-button{box-sizing:border-box;display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;border:1px solid var(--wrm2-line-strong)!important;border-radius:0;background:var(--wrm2-panel)!important;color:var(--wrm2-muted);box-shadow:none!important;cursor:pointer}
.wrm2-modal-close:is(:hover,:focus-visible),.wrm2-body .ui-dialog-titlebar-close.wrm2-close-button:is(:hover,:focus-visible){border-color:var(--wrm2-mint)!important;background:var(--wrm2-panel2)!important;color:var(--wrm2-mint)}
.wrm2-body .ui-dialog-titlebar-close.wrm2-close-button{position:absolute;right:18px;top:18px;margin:0!important;font-size:0;overflow:hidden}
.wrm2-body .ui-dialog-titlebar-close.wrm2-close-button::before{content:"";display:block;width:16px;height:16px;background:url("../../ui/x.svg") center/contain no-repeat}
.wrm2-body .ui-dialog-titlebar-close.wrm2-close-button :is(.ui-icon,.ui-button-text){display:none!important}
.wrm2-search-clear{position:absolute;z-index:1;top:50%;right:4px;transform:translateY(-50%);display:flex}
.wrm2-search-clear[hidden]{display:none}

/* Shared navigation + search control bar; the library composition is the single canonical layout. */
/* Shared Items / Home / Champion-category control bar: one layout, no per-page copies. */
.wrm2-library-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;min-width:0;margin-bottom:16px}
.wrm2-library-controls-tabs{flex:1 1 auto;min-width:0;margin:0}
.wrm2-library-controls-search{flex:0 1 280px;min-width:0;height:38px;gap:10px;padding:0 12px}
.wrm2-library-controls-search>img{width:17px;height:17px;flex:0 0 17px}
.wrm2-library-controls-search input[type=search]{font-size:12px;padding-left:0}
.wrm2-library-controls-search .wrm2-search-clear{flex:0 0 22px;width:22px;min-height:22px;padding:3px}
@media(max-width:900px){.wrm2-library-controls{align-items:stretch}.wrm2-library-controls-tabs{width:100%}.wrm2-library-controls-search{flex:1 1 100%;max-width:none}}
/* Same paired toolbar position for non-search controls (e.g. patch selection). */
.wrm2-library-controls-filter{display:flex;align-items:center;flex:0 1 335px;min-width:0;height:44px}
.wrm2-library-controls-filter>select{width:100%;height:44px}
@media(max-width:900px){.wrm2-library-controls-filter{flex:1 1 100%;max-width:none}}


.wrm2-global-results{position:absolute;z-index:90;top:calc(100% + 5px);left:0;right:0;max-height:min(340px,55vh);overflow-y:auto;padding:4px;border:1px solid var(--wrm2-line-strong);background:var(--wrm2-canvas2);box-shadow:0 18px 35px #000b}
.wrm2-global-results a,.wrm2-global-results button{display:flex;align-items:center;width:100%;padding:11px 13px;border:0;background:transparent;color:var(--wrm2-text);font:600 12px/1.4 var(--wrm2-font);text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;cursor:pointer}
.wrm2-global-results :is(a,button):is(:hover,:focus-visible,.is-selected){color:var(--wrm2-mint);background:#1cfb8c12}
.wrm2-global-search-empty{padding:12px;color:var(--wrm2-muted);font-size:12px}
.wrm2-command-search-toggle{display:none}
.wrm2-locale-picker{position:relative;flex:0 0 auto;min-width:140px}
.wrm2-locale-trigger{display:flex;align-items:center;justify-content:flex-start;gap:9px;width:100%;height:38px;padding:0 11px;border:1px solid var(--wrm2-line-strong);background:var(--wrm2-canvas2);color:var(--wrm2-text);font:900 11px/1.2 var(--wrm2-font);letter-spacing:.07em;white-space:nowrap}
.wrm2-locale-trigger:hover,.wrm2-locale-trigger[aria-expanded=true]{border-color:var(--wrm2-mint)}
.wrm2-locale-trigger>img:first-child,.wrm2-locale-options img{width:23px;object-fit:cover}
.wrm2-locale-chevron{width:15px;height:15px;margin-left:auto}
.wrm2-locale-options{position:absolute;z-index:90;top:calc(100% + 5px);left:0;right:0;min-width:205px;max-height:min(60vh,430px);overflow-y:auto;overscroll-behavior:contain;padding:4px;border:1px solid var(--wrm2-line-strong);background:var(--wrm2-canvas2);box-shadow:0 18px 35px #000b;scrollbar-width:thin}
.wrm2-locale-options a,.wrm2-locale-options button{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:8px;color:var(--wrm2-text);background:transparent;border:0;text-align:left;font:900 11px/1.2 var(--wrm2-font);letter-spacing:.07em;white-space:nowrap}
.wrm2-locale-options a:hover,.wrm2-locale-options a:focus-visible{background:#1cfb8c12;color:var(--wrm2-mint)}
.wrm2-locale-options button:disabled{cursor:default;color:var(--wrm2-muted);opacity:.7}
.wrm2-locale-options small{margin-left:auto;color:var(--wrm2-subtle);font-size:9px;letter-spacing:.05em}
.wrm2-search-modal-field{flex:1 1 auto;min-width:0}
@media(min-width:1091px) and (max-width:1360px){.wrm2-app:not(.is-compact) .wrm2-command-actions>.wrm2-pill-pro{flex:0 0 38px;width:38px;min-width:38px;justify-content:center;padding:0 7px}.wrm2-app:not(.is-compact) .wrm2-command-actions>.wrm2-pill-pro .wrm2-pill-label{display:none}.wrm2-app:not(.is-compact) .wrm2-account-guest{flex:0 0 38px;width:38px;min-width:38px;justify-content:center;padding:0 9px}.wrm2-app:not(.is-compact) .wrm2-account-guest-label{display:none}}
@media(max-width:1090px){
  .wrm2-global-search{display:none}
  .wrm2-command-search-toggle{display:inline-flex}
  .wrm2-command-actions{flex:0 0 auto;gap:7px;margin-left:auto}
  .wrm2-pill-label,.wrm2-account-guest-label,.wrm2-account-copy,.wrm2-small-icon{display:none}
  .wrm2-command-actions>.wrm2-pill-pro{width:38px;min-width:38px;justify-content:center;padding:0 7px}
  .wrm2-account-guest{width:38px;justify-content:center;padding:0 9px}
  .wrm2-account-trigger{padding:3px}
  .wrm2-locale-picker{min-width:0}
  .wrm2-locale-trigger{width:42px;justify-content:center;padding:0 7px}
  .wrm2-locale-trigger>span,.wrm2-locale-chevron{display:none}
  .wrm2-locale-options{min-width:205px;left:auto;right:0}
}
@media(max-width:750px){.wrm2-search-modal-field{width:100%}}
@media(max-width:430px){.wrm2-command-actions{gap:5px}.wrm2-locale-trigger{width:36px;height:38px}.wrm2-command-search-toggle{width:36px;flex-basis:36px}.wrm2-search-form{gap:9px}}

/* Shared WR-META sections: used by home and /meta/. Single definition. */
.wrm2-benefits-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:start;gap:clamp(20px,4vw,76px);margin:0 0 16px}
.wrm2-benefits-overline{display:inline-flex;gap:12px;align-items:center;color:var(--wrm2-mint);letter-spacing:.08em;font-weight:900;font-size:11px;margin:0 0 13px}
.wrm2-benefits-overline img{object-fit:contain}
.wrm2-benefits-header h2{font:900 clamp(22px,2.4vw,32px)/1.1 var(--wrm2-display);letter-spacing:-.028em}
.wrm2-benefits-subhead{font-size:16px;color:var(--wrm2-text);font-weight:900;margin:0 0 12px}
.wrm2-benefits-intro{color:var(--wrm2-muted);font-size:12px;line-height:1.8;margin:0}
.wrm2-membership{display:grid;grid-template-columns:minmax(170px,.35fr) minmax(0,1fr);align-items:center;gap:22px;min-height:260px;position:relative;overflow:hidden;margin:0 0 30px;border:1px solid #1cfb8c4a;background:radial-gradient(ellipse at 16% 100%,#1cfb8c16,transparent 47%),linear-gradient(115deg,#111b1a,#0e1216);box-shadow:0px -7px 20px 0px rgb(28 251 140 / 10%),1px 7px 20px -5px rgb(28 251 140 / 10%)}
.wrm2-membership::before{position:absolute;inset:0;content:"";pointer-events:none;opacity:.65;background-image:linear-gradient(#1cfb8c0b 1px,transparent 1px),linear-gradient(90deg,#1cfb8c0b 1px,transparent 1px);background-size:35px 35px}
.wrm2-membership-art,.wrm2-membership-content{position:relative;z-index:1}
.wrm2-membership-art{height:100%;min-height:255px;display:grid;align-items:end;justify-content:center;overflow:hidden}
.wrm2-membership-art img{max-height:285px;max-width:100%;width:auto;object-fit:contain;object-position:bottom;filter:contrast(1.05);transform:translateY(var(--wrm2-membership-art-offset,0px))}
.wrm2-membership-content{padding:32px 24px 32px 0;text-align:center}
.wrm2-membership-content h2{font:900 clamp(25px,3vw,41px)/1.13 var(--wrm2-display);letter-spacing:-.03em;margin:11px 0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px}
.wrm2-membership-mark{width:56px;height:56px;object-fit:contain}
.wrm2-membership-content>p:not(.wrm2-kicker){font-size:12px;line-height:1.8;color:var(--wrm2-muted);max-width:640px;margin:0 auto 23px}
.wrm2-membership-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
@media(max-width:960px){.wrm2-benefits-header{grid-template-columns:1fr}.wrm2-membership{grid-template-columns:180px 1fr}}
@media(max-width:680px){.wrm2-membership{grid-template-columns:1fr;gap:0}.wrm2-membership-art{min-height:0;height:125px}.wrm2-membership-art img{max-height:155px;transform:none}.wrm2-membership-content{padding:16px 17px 26px}.wrm2-membership-content h2{font-size:26px}}

/* One 38px action-button component for WRM toolbars (Draft + Tier Maker). */
.wrm2-body .wrm2-toolbar-button{min-height:38px;height:38px;padding:0 13px;font:900 11px/1.2 var(--wrm2-font);letter-spacing:.07em;white-space:nowrap}
.wrm2-body .wrm2-toolbar-icon-button{flex:0 0 38px;width:38px;min-width:38px;padding:0;font-size:20px;letter-spacing:0}
.wrm2-body .wrm2-toolbar-button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
/* Shared META toolbar and 38px search: canonical across Meta, Meta Shift and Prediction. */
.wrm2-meta-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--wrm2-panel);border:1px solid var(--wrm2-line-strong);padding:12px;min-width:0;margin-bottom:10px}
.wrm2-meta-search{flex:1 1 180px;min-width:140px;min-height:38px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--wrm2-line-strong);background:var(--wrm2-canvas)}
.wrm2-meta-search>img{height:16px;width:16px;flex-shrink:0}
.wrm2-meta-search:focus-within,.wrm2-meta-search:hover{border-color:var(--wrm2-mint);outline:1px solid var(--wrm2-mint);outline-offset:1px}
.wrm2-meta-search.wrm2-search-field input[type=search]{flex:1;width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--wrm2-text);height:36px;padding:0;box-shadow:none;font-size:12px}
.wrm2-meta-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
@media(max-width:620px){.wrm2-meta-toolbar{gap:7px}}

/* Shared informational placeholder for profile and champion guide empty states. */
.wrm2-profile-placeholder{display:flex;align-items:center;gap:18px;padding:18px;border:1px dashed var(--wrm2-line-strong);background:var(--wrm2-panel)}
.wrm2-profile-placeholder strong{font-size:13px}
.wrm2-profile-placeholder p{margin:5px 0 0;color:var(--wrm2-muted);font-size:12px}

/* Shared compact empty-evidence state (GGLYTICS Draft Matchup, WRM palette). */
.wrm2-body .empty-state.empty-action.compact{display:flex;align-items:center;gap:11px;min-height:72px;padding:11px;border:1px dashed var(--wrm2-line);background:var(--wrm2-canvas)}
.wrm2-body :is(.empty-state.empty-action.compact,.wrm2-profile-placeholder) .empty-icon{display:grid;flex:0 0 32px;width:32px;height:32px;place-items:center;border:1px solid var(--wrm2-line-strong);background:var(--wrm2-panel)}
.wrm2-body :is(.empty-state.empty-action.compact,.wrm2-profile-placeholder) .empty-icon img{width:18px;height:18px;object-fit:contain}
.wrm2-body .empty-state.empty-action.compact .empty-action-copy{display:grid;gap:4px;min-width:0}
.wrm2-body .empty-state.empty-action.compact strong{font-size:11px;color:var(--wrm2-text);letter-spacing:.04em}
.wrm2-body .empty-state.empty-action.compact p{margin:0;font-size:10px;line-height:1.5;color:var(--wrm2-muted)}

.wrm2-meta-search.wrm2-search-field input[type=search]:focus-visible{outline:0;box-shadow:none}
@media(max-width:620px){.wrm2-meta-search{flex-basis:100%}}

/* One entitlement/upgrade usage strip for Meta, Shift, Analytics and Draft Analyzer. */
.access-usage-strip{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--wrm2-line-strong);border-left:3px solid var(--wrm2-yellow);background:var(--wrm2-canvas2)}
.access-usage-strip[hidden]{display:none}
.access-usage-icon{display:grid;place-items:center;width:32px;height:32px}.access-usage-badge{width:30px;height:30px;object-fit:contain}
.access-usage-copy{min-width:0;display:grid;gap:4px}.access-usage-copy strong{color:var(--wrm2-text);font-size:11px;font-weight:900;letter-spacing:.06em}.access-usage-copy>div{color:var(--wrm2-muted);font-size:11px;line-height:1.5}
.access-usage-strip .premium-upgrade-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:6px 10px;color:var(--wrm2-yellow);border:1px solid var(--wrm2-yellow);background:transparent;text-decoration:none;font-size:10px;font-weight:900;white-space:nowrap}
.access-usage-strip .premium-button-icon{width:21px;height:21px;object-fit:contain}
.access-usage-strip .premium-upgrade-button:hover{background:color-mix(in srgb,var(--wrm2-yellow) 10%,transparent)}
.access-usage-strip.is-plus-upgrade{--team:var(--wrm2-purple);border-left-color:var(--wrm2-purple)}
.access-usage-strip.is-plus-upgrade .premium-upgrade-button{color:#ba8fff;border-color:var(--wrm2-purple);background:color-mix(in srgb,var(--team) 22%,transparent)}
.access-usage-strip.is-plus-upgrade .premium-upgrade-button:hover,.access-usage-strip.is-plus-upgrade .premium-upgrade-button:focus-visible{background:color-mix(in srgb,var(--team) 34%,transparent);outline:1px solid var(--team);outline-offset:1px}
@media(max-width:620px){.access-usage-strip{grid-template-columns:32px minmax(0,1fr)}.access-usage-strip .premium-upgrade-button{grid-column:2;justify-self:start;white-space:normal}}

/* Shared legacy win-rate scale — statistics and champion hover tooltips. */
.wrm2-winrate.is-high{color:#3cff8f}
.wrm2-winrate.is-mid{color:#ffb020}
.wrm2-winrate.is-low{color:#ff4d4d}

/* Shared patch label in PHP-rendered H1/H2. No page-level overrides. */
.wrm2-heading-patch{display:inline-block;vertical-align:middle;margin:0 0 .45em 0;padding:4px 7px;border:1px solid var(--wrm2-mint);color:var(--wrm2-mint);font:900 clamp(10px,.32em,13px)/1.2 var(--wrm2-font);letter-spacing:.06em;white-space:nowrap}

/* Shared, accessible checkbox component. DLE provides the native input: keep its name/value. */
.wrm2-checkbox{display:inline-flex;align-items:center;gap:8px;min-height:30px;cursor:pointer;user-select:none;color:var(--wrm2-muted);font:800 10px/1.3 var(--wrm2-font);letter-spacing:.04em}
.wrm2-checkbox>input[type="checkbox"]{box-sizing:border-box;flex:none;display:grid;place-items:center;appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;border:1px solid var(--wrm2-line-strong);border-radius:0;background:var(--wrm2-canvas2);color:#06170e;cursor:pointer;transition:border-color .15s,background .15s}
.wrm2-checkbox>input[type="checkbox"]::after{content:"";display:block;width:10px;height:10px;background:currentColor;clip-path:polygon(8% 48%,33% 73%,89% 14%,100% 25%,34% 90%,0 56%);transform:scale(0);transition:transform .13s}
.wrm2-checkbox>input[type="checkbox"]:checked{border-color:var(--wrm2-mint);background:var(--wrm2-mint)}
.wrm2-checkbox>input[type="checkbox"]:checked::after{transform:scale(1)}
.wrm2-checkbox>input[type="checkbox"]:focus-visible{outline:2px solid var(--wrm2-mint);outline-offset:3px}
.wrm2-checkbox>input[type="checkbox"]:disabled{opacity:.4;cursor:not-allowed}
.wrm2-checkbox:has(>input[type="checkbox"]:checked){color:var(--wrm2-mint)}
.wrm2-checkbox:not(:has(>input[type="checkbox"])){display:none}

/* Shared unread-message indicator — attached to the profile, never a separate header bell. */
.wrm2-chat-dot{display:block;flex:none;box-sizing:border-box;width:10px;height:10px;border-radius:50%;background:#ff345d;box-shadow:0 0 0 2px var(--wrm2-canvas2);pointer-events:none}
.wrm2-chat-dot[hidden],.wrm2-chat-menu-count[hidden]{display:none!important}
.wrm2-account-portrait{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;width:30px;height:30px}
.wrm2-account-portrait>.wrm2-chat-dot{position:absolute;top:0px;right:-1px;z-index:1;box-shadow:0 0 0 2px var(--wrm2-panel)}
.wrm2-account-menu a.wrm2-account-menu-item{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wrm2-account-menu-item>span:first-child{min-width:0}
.wrm2-account-menu-label{display:inline-flex;align-items:center;gap:10px;min-width:0}
.wrm2-account-menu-label>img{display:block;box-sizing:border-box;width:14px;height:14px;flex:0 0 20px;object-fit:contain}
.wrm2-account-menu-label>img.wrm2-account-menu-icon--brand{padding:1px}
.wrm2-account-menu-item small{color:var(--wrm2-muted);font-size:10px}
.wrm2-chat-menu-signal{display:inline-flex;align-items:center;gap:7px;flex:none}
.wrm2-chat-menu-count{display:inline-grid;place-items:center;box-sizing:border-box;min-width:20px;height:20px;padding:0 4px;border:1px solid #ff345d;color:#ff718d;font:900 10px/1 var(--wrm2-font);letter-spacing:0}

/* Shared native DLE jQuery UI modal frame. Initially used by complaint reports;
   also applicable to future native prompts (not a second custom dialog). */
.wrm2-native-dialog.ui-dialog{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%);box-sizing:border-box;display:flex;flex-direction:column;width:min(600px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)!important;height:auto!important;margin:0;padding:0;border:1px solid var(--wrm2-line-strong);border-radius:0;background:var(--wrm2-canvas2);color:var(--wrm2-text);box-shadow:0 24px 80px #000c;overflow:hidden;z-index:10020!important}
.wrm2-native-dialog .wrm2-modal-head.ui-dialog-titlebar{position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:72px;box-sizing:border-box;margin:0;padding:14px 58px 14px 20px;border:0;border-bottom:1px solid var(--wrm2-line);border-radius:0;background:var(--wrm2-canvas2);color:var(--wrm2-text)}
.wrm2-native-dialog .wrm2-modal-kicker{font:900 10px/1.3 var(--wrm2-font);letter-spacing:.12em;color:var(--wrm2-mint)}
.wrm2-native-dialog .ui-dialog-titlebar-close.wrm2-close-button{position:absolute;top:16px;right:18px;left:auto;margin:0}
.wrm2-native-dialog .ui-dialog-title{font:900 22px/1.2 var(--wrm2-display);color:var(--wrm2-text)}

.wrm2-native-dialog .wrm2-native-dialog-content.ui-dialog-content{box-sizing:border-box;flex:1 1 auto;width:100%!important;min-width:0;min-height:0;max-height:calc(100dvh - 154px)!important;height:auto!important;padding:20px!important;border:0;background:var(--wrm2-canvas2);color:var(--wrm2-text);overflow:auto;font:500 12px/1.5 var(--wrm2-font)}
.wrm2-native-dialog .wrm2-native-dialog-content textarea{width:100%!important;max-width:100%;box-sizing:border-box;min-height:115px!important;height:130px!important;margin:6px 0 0;padding:11px;border:1px solid var(--wrm2-line-strong);border-radius:0;background:var(--wrm2-panel);color:var(--wrm2-text);font:13px/1.5 var(--wrm2-font)}
.wrm2-native-dialog .wrm2-native-dialog-content :is(#dlepopupmessage,textarea){overflow-wrap:anywhere}
.wrm2-native-dialog .wrm2-native-dialog-content #dlepopupmessage{margin:0;color:var(--wrm2-text);font:500 13px/1.7 var(--wrm2-font)}
.wrm2-native-dialog .ui-dialog-buttonpane{box-sizing:border-box;flex:none;width:100%;margin:0;padding:12px 20px;border:0;border-top:1px solid var(--wrm2-line);background:var(--wrm2-panel)}
.wrm2-native-dialog .ui-dialog-buttonset{display:flex;float:none;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.wrm2-native-dialog .ui-dialog-buttonpane button.wrm2-btn{float:none;min-height:38px;margin:0;padding:9px 14px;border:1px solid var(--wrm2-line-strong);border-radius:0;background:var(--wrm2-panel2);color:var(--wrm2-text);font:900 11px/1.2 var(--wrm2-font);text-transform:uppercase;cursor:pointer}
.wrm2-native-dialog .ui-dialog-buttonpane button.wrm2-btn-primary{background:var(--wrm2-mint);border-color:var(--wrm2-mint);color:#06170e}
.wrm2-native-dialog .ui-dialog-buttonpane button.wrm2-btn:hover{border-color:var(--wrm2-mint)}
.wrm2-native-overlay.ui-widget-overlay{position:fixed;inset:0;z-index:10019!important;opacity:1;background:#000e;backdrop-filter:blur(4px)}
@media(max-width:620px){.wrm2-native-dialog.ui-dialog{width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)}.wrm2-native-dialog .wrm2-modal-head.ui-dialog-titlebar{padding:12px 52px 12px 12px;min-height:66px}.wrm2-native-dialog .wrm2-native-dialog-content.ui-dialog-content{padding:13px!important}.wrm2-native-dialog .ui-dialog-titlebar-close.wrm2-close-button{top:12px;right:12px}.wrm2-native-dialog .ui-dialog-buttonpane{padding:10px 12px}}

/* Current CN META trend is signed; its arrows do not claim historical delta. */
.wrm2-trend-motion{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font:900 11px/1.2 var(--wrm2-font)}
.wrm2-trend-motion.is-up{color:var(--wrm2-mint)}
.wrm2-trend-motion.is-down{color:var(--wrm2-red)}
.wrm2-trend-motion.is-neutral{color:var(--wrm2-muted)}

/* Video iframe is created only after a click; no player download before interaction */
.wrm2-video-dialog{width:min(940px,calc(100vw - 24px));max-width:940px;margin:auto;padding:0;border:1px solid var(--wrm2-line-strong);background:var(--wrm2-canvas2);color:var(--wrm2-text)}
.wrm2-video-dialog::backdrop{background:#000e;backdrop-filter:blur(4px)}
.wrm2-video-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--wrm2-line);font-size:12px;letter-spacing:.08em}
.wrm2-video-frame{width:100%;aspect-ratio:16/9;background:#000}
.wrm2-video-frame iframe{width:100%;height:100%;border:0;display:block}
/* Shared champion availability overlay: home, guide and profile favorites. */
.wrm2-unavailable{position:absolute;z-index:1;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:6px;min-height:24px;background:#000b;color:var(--wrm2-text);text-align:center;font-size:11px;font-weight:900;letter-spacing:.06em}

/* Same 35px mint grid as PRO MEMBERSHIP, composited into the existing heading background so the heading needs no extra pseudo-element. */
.wrm2-dna-head{display:block;min-width:0;padding:16px;border:1px solid var(--wrm2-line-strong);background:linear-gradient(#1cfb8c07 1px,transparent 1px),linear-gradient(90deg,#1cfb8c07 1px,transparent 1px),radial-gradient(ellipse at 16% 100%,#1cfb8c16,transparent 47%),linear-gradient(115deg,#111b1a,#0e1216);background-size:35px 35px,35px 35px,auto,auto}
.wrm2-dna-head h2{margin:8px 0 10px;font:900 clamp(27px,3vw,38px)/1.1 var(--wrm2-display)}
@media(max-width:540px){.wrm2-dna-head h2{font-size:25px}}
.wrm2-guide-title-accent{color:var(--wrm2-mint)}
.wrm2-dna-head .wrm2-kicker{margin:0;color:var(--wrm2-mint);letter-spacing:.08em;font-weight:900;font-size:11px}
.wrm2-dna-description{max-width:880px;color:var(--wrm2-muted);font-size:12px;line-height:1.65;margin:0}

/* Champion guide section headers: one layout, lane title and dynamic variants. */
.wrm2-legacy-section-head{margin:0}
.wrm2-legacy-section-head h2{display:flex;align-items:center;gap:10px}
.wrm2-legacy-lane{display:block;flex:0 0 28px;width:28px;height:28px;object-fit:contain;background-color:var(--wrm2-mint);-webkit-mask:var(--wrm2-legacy-lane-mask) center/contain no-repeat;mask:var(--wrm2-legacy-lane-mask) center/contain no-repeat}
@media(max-width:620px){.wrm2-legacy-section-head h2{align-items:flex-start}}


/* SOURCE: core/profile-popup.css */
/* DLE 14 AJAX profile popup: native jQuery UI frame, shared WRM 2.0 UI Kit tokens. */
.dle-popup-userprofile.wrm2-profile-dialog.ui-dialog{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%);display:flex;flex-direction:column;box-sizing:border-box;width:min(550px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px);height:auto!important;max-height:calc(100dvh - 24px)!important;margin:0;padding:0;border:1px solid var(--wrm2-line-strong);border-radius:0;background:var(--wrm2-canvas2);color:var(--wrm2-text);box-shadow:0 24px 80px #000c;overflow:hidden;z-index:10020!important}
.dle-popup-userprofile .wrm2-modal-head.ui-dialog-titlebar{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;flex:0 0 auto;gap:5px;min-height:79px;margin:0;padding:16px 58px 16px 20px;border:0;border-bottom:1px solid var(--wrm2-line);border-radius:0;background:var(--wrm2-canvas2);color:var(--wrm2-text);cursor:default}
.dle-popup-userprofile .wrm2-modal-kicker{color:var(--wrm2-mint);font:900 10px/1.3 var(--wrm2-font);letter-spacing:.13em}
.dle-popup-userprofile .ui-dialog-title{display:block;float:none;width:auto;max-width:100%;margin:0;color:var(--wrm2-text);font:900 clamp(17px,2.3vw,23px)/1.2 var(--wrm2-display);overflow-wrap:anywhere}
#dleprofilepopup.wrm2-profile-popup-content.ui-dialog-content{box-sizing:border-box;flex:1 1 auto;min-width:0;width:100%!important;max-height:calc(100dvh - 124px)!important;height:auto!important;padding:20px!important;border:0;background:var(--wrm2-canvas2);color:var(--wrm2-text);overflow:auto;font:500 12px/1.5 var(--wrm2-font)}
.wrm2-profile-popup{min-width:0;display:grid;gap:16px}
/* Main actions live in the template, directly below the player identity: no dependency on jQuery UI buttonpane. */
.wrm2-profile-popup__actions{display:flex;align-items:stretch;flex-wrap:wrap;gap:9px;margin:0;padding:0}
.wrm2-profile-popup__actions .wrm2-profile-popup__action{flex:1 1 130px;min-width:0;min-height:42px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:0;text-decoration:none;text-align:center;font:900 11px/1.25 var(--wrm2-font);letter-spacing:.05em;white-space:normal;cursor:pointer}
.wrm2-profile-popup__actions .wrm2-profile-popup__action[hidden]{display:none!important}
.wrm2-profile-popup__actions .wrm2-profile-popup__action--admin{background:var(--wrm2-panel2);color:var(--wrm2-text)!important}
/* Hide duplicate native View/PM actions after transferring the optional native admin edit button. */
.dle-popup-userprofile.wrm2-profile-dialog--ready .ui-dialog-buttonpane{display:none!important}
.wrm2-profile-popup__hero{display:flex;align-items:center;gap:16px;min-width:0}
.wrm2-profile-popup__portrait{position:relative;flex:0 0 82px;width:82px;height:82px;min-width:0}
.wrm2-profile-popup__avatar{box-sizing:border-box;width:100%;height:100%;padding:3px;border:2px solid var(--wrm2-user-avatar-color,var(--wrm2-mint));border-radius:50%;background:var(--wrm2-panel)}
.wrm2-profile-popup__avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
/* Popup portrait is 82px, while comment avatars are 48px: size the shared badge to the portrait.
   This badge is a SIBLING of the avatar and is positioned independently of it. */
.wrm2-profile-popup__portrait>.wrm2-pro-badge{right:-6px;bottom:-6px;width:34px;height:34px}
.wrm2-profile-popup__portrait>.wrm2-pro-badge img{width:27px;height:27px}
.wrm2-profile-popup__identity{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.wrm2-profile-popup__name{max-width:100%;color:var(--wrm2-text);font:900 21px/1.2 var(--wrm2-display);overflow-wrap:anywhere}
.wrm2-profile-popup__group{font:800 11px/1.4 var(--wrm2-font);color:var(--wrm2-mint)}
.wrm2-profile-popup__tags{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}
.wrm2-profile-popup__presence.wrm2-nav-pill{display:inline-flex;align-items:center;gap:5px;min-height:23px;padding:3px 8px;font:900 9px/1.25 var(--wrm2-font);letter-spacing:.05em;white-space:nowrap}
.wrm2-profile-popup__presence--online{color:var(--wrm2-mint);border-color:#1cfb8c55;background:#1cfb8c10}
.wrm2-profile-popup__presence--offline{color:var(--wrm2-muted);border-color:var(--wrm2-line-strong);background:var(--wrm2-panel)}
.wrm2-profile-popup__status-dot{display:block;flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:currentColor}
.wrm2-profile-popup__rank{display:inline-flex;align-items:center;min-height:23px;padding:3px 8px;border:1px solid var(--wrm2-line-strong);background:var(--wrm2-panel);color:var(--wrm2-text);font:800 9px/1.25 var(--wrm2-font);letter-spacing:.03em;white-space:nowrap}
.wrm2-profile-popup__rank--role{color:var(--wrm2-muted)}
.wrm2-profile-popup__bio{padding:12px;border:1px solid var(--wrm2-line);background:var(--wrm2-panel);color:var(--wrm2-muted);overflow-wrap:anywhere}
.wrm2-profile-popup__facts{display:grid;gap:10px;margin:0;padding:15px 0;border-top:1px solid var(--wrm2-line);border-bottom:1px solid var(--wrm2-line)}
.wrm2-profile-popup__facts>div{display:grid;grid-template-columns:minmax(95px,35%) minmax(0,1fr);gap:10px;align-items:baseline}
.wrm2-profile-popup__facts dt{color:var(--wrm2-muted);font:800 10px/1.4 var(--wrm2-font);letter-spacing:.04em}
.wrm2-profile-popup__facts dd{min-width:0;margin:0;color:var(--wrm2-text);overflow-wrap:anywhere}
.wrm2-profile-popup__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--wrm2-line);background:var(--wrm2-panel)}
.wrm2-profile-popup__stats>div{display:grid;grid-template-rows:minmax(28px,auto) auto;align-content:center;align-items:center;justify-items:center;gap:5px;min-width:0;min-height:77px;padding:13px 8px;border-right:1px solid var(--wrm2-line);text-align:center}
.wrm2-profile-popup__stats>div:last-child{border-right:0}
.wrm2-profile-popup__stats strong{font:900 21px/1.2 var(--wrm2-display);color:var(--wrm2-text)}
.wrm2-profile-popup__stats span{font:900 9px/1.3 var(--wrm2-font);letter-spacing:.06em;color:var(--wrm2-muted)}
/* DLE {rate} returns nested ratingtypeplus/minus spans with its own font size. */
.wrm2-profile-popup__stats strong :is(.ratingtypeplus,.ratingtypeplusminus,.ratingplus,.ratingminus,.ratingzero){font:inherit;font-size:inherit;letter-spacing:inherit}
.wrm2-profile-popup__stats strong .rating{display:inline-flex!important;align-items:center;justify-content:center;vertical-align:middle}
.wrm2-profile-popup__stats strong .unit-rating{margin:0;padding:0}

.dle-popup-userprofile .ui-dialog-buttonpane{box-sizing:border-box;flex:0 0 auto;width:100%;margin:0;padding:13px 20px;border:0;border-top:1px solid var(--wrm2-line);border-radius:0;background:var(--wrm2-panel)}
.dle-popup-userprofile .ui-dialog-buttonset{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:9px;float:none;width:100%}
.dle-popup-userprofile .ui-dialog-buttonpane button.wrm2-btn{float:none;box-sizing:border-box;min-height:40px;height:auto;margin:0;padding:9px 15px;border:1px solid var(--wrm2-line-strong);border-radius:0;background:var(--wrm2-panel2);color:var(--wrm2-text)!important;box-shadow:none;font:900 11px/1.3 var(--wrm2-font);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.dle-popup-userprofile .ui-dialog-buttonpane button.wrm2-btn:hover{border-color:var(--wrm2-mint)}
.dle-popup-userprofile .ui-dialog-buttonpane button.wrm2-btn-primary{border-color:var(--wrm2-mint);background:var(--wrm2-mint);color:#06170e!important}
.dle-popup-userprofile .ui-dialog-buttonpane button.wrm2-btn-primary:hover{background:#75ffb7;color:#06170e!important}
.wrm2-profile-popup-overlay.ui-widget-overlay{position:fixed;inset:0;z-index:10019!important;opacity:1;background:#000e;backdrop-filter:blur(4px)}
@media(max-width:620px){.dle-popup-userprofile.wrm2-profile-dialog.ui-dialog{width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px);max-height:calc(100dvh - 12px)!important}.dle-popup-userprofile .wrm2-modal-head.ui-dialog-titlebar{padding:13px 52px 13px 12px;min-height:70px}.dle-popup-userprofile .ui-dialog-titlebar-close.wrm2-close-button{top:13px;right:12px}#dleprofilepopup.wrm2-profile-popup-content.ui-dialog-content{max-height:calc(100dvh - 105px)!important;padding:13px!important}.dle-popup-userprofile .ui-dialog-buttonpane{padding:10px 12px}.dle-popup-userprofile .ui-dialog-buttonpane button.wrm2-btn{flex:1;min-width:0;padding:9px 7px;font-size:10px}.wrm2-profile-popup__portrait{flex-basis:68px;width:68px;height:68px}.wrm2-profile-popup__portrait>.wrm2-pro-badge{right:-5px;bottom:-5px;width:30px;height:30px}.wrm2-profile-popup__portrait>.wrm2-pro-badge img{width:24px;height:24px}.wrm2-profile-popup__name{font-size:18px}}


/* SOURCE: core/tab-scroll.css */
/* Stage 3.111 — one horizontal tab navigation affordance for Home, champion
   category links, Items and Build Creator. The component only enhances
   existing navs; without JS, every original tab/link remains usable. */
.wrm2-tab-scroll-shell{position:relative;min-width:0;max-width:100%}
.wrm2-library-controls>.wrm2-tab-scroll-shell{flex:1 1 auto;min-width:0}
.wrm2-tab-scroll-shell>:is(.wrm2-tablist,.champ-profile-tabs){box-sizing:border-box;width:100%;max-width:100%;margin-bottom:0}
.wrm2-creator .wrm2-tab-scroll-shell--steps>.wr-bc-stepnav{box-sizing:border-box;width:100%;background:var(--wrbc-bg)}
.wrm2-tab-scroll-arrow{display:none;position:absolute;z-index:3;top:50%;transform:translateY(-50%);align-items:center;justify-content:center;width:24px;height:34px;padding:0;border:1px solid var(--wrm2-mint);border-radius:0;background:var(--wrm2-panel);color:var(--wrm2-mint);font:900 24px/1 var(--wrm2-font);cursor:pointer;box-shadow:0 0 12px rgb(0 0 0 / 45%)}
.wrm2-tab-scroll-arrow--prev{left:0}
.wrm2-tab-scroll-arrow--next{right:0}
.wrm2-tab-scroll-arrow:focus-visible{outline:2px solid var(--wrm2-mint);outline-offset:2px}
.wrm2-tab-scroll-arrow:disabled{opacity:.38;cursor:default}
.wrm2-tab-scroll-arrow[hidden]{display:none!important}
@media(max-width:900px){
  .wrm2-library-controls>.wrm2-tab-scroll-shell{flex:1 1 100%;width:100%}
  .wrm2-tab-scroll-shell[data-tab-overflow="true"]>.wrm2-tab-scroll-arrow{display:flex}
  .wrm2-tab-scroll-shell[data-tab-overflow="true"]>:is(.wrm2-tablist,.wr-bc-stepnav,.champ-profile-tabs){scroll-padding-inline:28px;padding-inline:28px}
}
@media(prefers-reduced-motion:reduce){.wrm2-tab-scroll-arrow{transition:none}}


/* SOURCE: core/meta-faq.css */
/* WRM 2.0 — canonical FAQ component shared by Meta, Meta Shift and Build Creator. */
.wrm2-meta-faq h2{font:900 clamp(20px,2.4vw,30px)/1.2 var(--wrm2-display);margin:7px 0}
.wrm2-meta-faq{display:grid;grid-template-columns:minmax(190px,.35fr) minmax(0,.65fr);gap:30px;align-items:start}
.wrm2-meta-faq-items{display:grid;gap:10px}
.wrm2-meta-faq-items details{border:1px solid var(--wrm2-line-strong);background:var(--wrm2-panel);padding:16px}
.wrm2-meta-faq-items summary{cursor:pointer;font-size:12px;font-weight:800;color:var(--wrm2-text)}
.wrm2-meta-faq-items details[open] summary{color:var(--wrm2-mint)}
.wrm2-meta-faq-items p{font-size:12px;color:var(--wrm2-muted);line-height:1.75;margin:12px 0 0}
@media(max-width:850px){.wrm2-meta-faq{grid-template-columns:1fr}}


/* SOURCE: core/dropdowns.css */
/* WRM 2.0 shared dropdown: one typography for every trigger and option.
   Geometry and states remain here; page CSS may constrain width only. */
.wrm2-meta-dropdown{position:relative;box-sizing:border-box;min-width:0;width:100%;flex:0 1 auto}
.wrm2-meta-dropdown:has(.wrm2-meta-dropdown-trigger[aria-expanded="true"]){z-index:170}
.wrm2-body .wrm2-meta-dropdown-trigger{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:38px;min-height:38px;gap:8px;overflow:hidden;padding:0 11px;border:1px solid var(--wrm2-line-strong);border-radius:0;background:var(--wrm2-canvas2);color:var(--wrm2-text);font:900 11px/1.2 var(--wrm2-font);letter-spacing:.07em;text-align:left;text-transform:none;white-space:nowrap;cursor:pointer}
.wrm2-meta-dropdown-trigger .wrm2-dropdown-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrm2-meta-dropdown-trigger::after{content:"";flex:0 0 12px;width:12px;height:12px;background:var(--wrm2-mint);mask:url("../../ui/chevron-down.svg") center/contain no-repeat;-webkit-mask:url("../../ui/chevron-down.svg") center/contain no-repeat}
.wrm2-body .wrm2-meta-dropdown-trigger:hover:not(:disabled),.wrm2-body .wrm2-meta-dropdown-trigger[aria-expanded="true"]{border-color:var(--wrm2-mint);outline:0}
.wrm2-body .wrm2-meta-dropdown-trigger:focus-visible{border-color:var(--wrm2-mint);outline:2px solid var(--wrm2-mint);outline-offset:2px}
.wrm2-body .wrm2-meta-dropdown-trigger:disabled{cursor:not-allowed;opacity:.55}
.wrm2-meta-dropdown-options{position:absolute;z-index:160;top:calc(100% + 5px);left:0;box-sizing:border-box;width:100%;min-width:100%;max-height:min(55vh,370px);overflow:auto;overscroll-behavior:contain;padding:4px;border:1px solid var(--wrm2-line-strong);border-radius:0;background:var(--wrm2-canvas2);box-shadow:0 18px 35px #000b;scrollbar-width:thin;scrollbar-color:var(--wrm2-mint) var(--wrm2-panel2)}
.wrm2-meta-dropdown-options[hidden]{display:none}
.wrm2-meta-dropdown-search{position:sticky;top:-4px;z-index:1;display:flex;align-items:center;gap:8px;padding:6px;background:var(--wrm2-canvas2);border-bottom:1px solid var(--wrm2-line)}
.wrm2-meta-dropdown-option[hidden]{display:none!important}
.wrm2-meta-dropdown-no-results{padding:11px 10px;color:var(--wrm2-muted);font:11px/1.5 var(--wrm2-font)}
.wrm2-meta-dropdown-options.is-right{left:auto;right:0}
.wrm2-body .wrm2-meta-dropdown-option{display:block;box-sizing:border-box;width:100%;min-height:36px;padding:9px 10px;overflow:hidden;border:0;border-radius:0;background:transparent;text-align:left;color:var(--wrm2-text);font:900 11px/1.2 var(--wrm2-font);letter-spacing:.07em;text-transform:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.wrm2-body .wrm2-meta-dropdown-option:hover,.wrm2-body .wrm2-meta-dropdown-option:focus-visible,.wrm2-body .wrm2-meta-dropdown-option[aria-selected="true"]{color:var(--wrm2-mint);background:rgb(28 251 140 / .075);outline:0}
.wrm2-body .wrm2-meta-dropdown-option:disabled{opacity:.35;cursor:not-allowed}
.wrm2-meta-native-select{position:absolute!important;left:0!important;top:0!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;max-width:1px!important;max-height:1px!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
/* Sizing only: all appearances, labels, option rows and states above are shared. */
.wrm2-tm-command-group .wrm2-meta-dropdown{min-width:105px;width:auto}
.wrm2-tm-filter-row .wrm2-meta-dropdown{min-width:0;width:100%}
.wrm2-prediction-controls .wrm2-meta-dropdown{min-width:145px;width:auto}
.wrm2-analytics-period .wrm2-meta-dropdown{width:190px;max-width:100%;flex:0 1 190px}
.wrm2-analytics-picker-filters .wrm2-meta-dropdown,.wrm2-analytics-picker>.wrm2-meta-dropdown{width:100%}
.wrm2-meta-select .wrm2-meta-dropdown,.wrm2-shift-history .wrm2-meta-dropdown,.wrm2-meta-compare-controls .wrm2-meta-dropdown{width:100%}
@media(max-width:520px){.wrm2-prediction-controls .wrm2-meta-dropdown{flex:1 1 auto;width:auto;min-width:0}.wrm2-analytics-period .wrm2-meta-dropdown{flex:1 1 100%;width:100%}}

/* DLE 14 native news action dropdown (MenuNewsBuild): the engine still owns
   quick/full editing, moderation and delete permissions. Only presentation is ours. */
body.wrm2-body #dropmenudiv {
  box-sizing:border-box; z-index:200!important; min-width:170px;
  padding:4px; border:1px solid var(--wrm2-line-strong); border-radius:0;
  background:var(--wrm2-canvas2); box-shadow:0 18px 35px #000b;
  font:900 11px/1.2 var(--wrm2-font); color:var(--wrm2-text);
}
body.wrm2-body #dropmenudiv a {
  display:block; box-sizing:border-box; width:100%; padding:11px 10px;
  background:transparent; color:var(--wrm2-text); text-decoration:none;
  letter-spacing:.04em; white-space:normal; overflow-wrap:break-word;
}
body.wrm2-body #dropmenudiv a:hover,
body.wrm2-body #dropmenudiv a:focus-visible {
  color:var(--wrm2-mint); background:rgb(28 251 140 / .075); outline:0;
}


/* SOURCE: modules/auth.css */
.wrm2-auth-dialog{width:min(470px,calc(100vw - 22px));max-height:calc(100dvh - 24px);overflow:auto;padding:0}
.wrm2-auth-head{display:flex;align-items:start;justify-content:space-between;padding:21px 22px 17px;gap:20px}
.wrm2-auth-head small{color:var(--wrm2-mint);font-size:10px;letter-spacing:.14em;font-weight:900}
.wrm2-auth-head h2{margin:5px 0 0;font:900 23px/1.2 var(--wrm2-display)}
.wrm2-auth-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--wrm2-line);border-bottom:1px solid var(--wrm2-line)}
.wrm2-auth-tabs button{min-height:43px;background:var(--wrm2-panel);border:0;border-bottom:2px solid transparent;color:var(--wrm2-muted);font:900 11px/1.2 var(--wrm2-font);letter-spacing:.07em}
.wrm2-auth-tabs button[aria-selected="true"]{background:#1cfb8c0f;border-color:var(--wrm2-mint);color:var(--wrm2-mint)}
.wrm2-auth-body{padding:23px}
.wrm2-form{display:flex;flex-direction:column;align-items:stretch;gap:9px}
.wrm2-form label:not(.wrm2-auth-checkbox){display:block;margin:7px 0 0;font-size:10px;color:var(--wrm2-muted);font-weight:900;letter-spacing:.1em}
.wrm2-form input:not([type="checkbox"]){width:100%;min-width:0;min-height:42px;border:1px solid var(--wrm2-line-strong);border-radius:1px;background:var(--wrm2-canvas2);padding:9px 11px;color:var(--wrm2-text);font-size:13px}
/* Shared native DLE modal and full-page form controls. */
.wrm2-form textarea{display:block;width:100%;min-height:115px;resize:vertical;border:1px solid var(--wrm2-line-strong);border-radius:1px;background:var(--wrm2-canvas2);padding:11px 12px;color:var(--wrm2-text);font:13px/1.65 var(--wrm2-font)}
.wrm2-form :is(textarea,input:not([type="checkbox"]),select):focus{outline:2px solid var(--wrm2-mint);outline-offset:1px;border-color:var(--wrm2-mint)}
/* Same compact file control for registration and editing an existing profile. */
:is(.wrm2-form,.wrm2-profile-settings) input[type="file"]{display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;height:42px;min-height:42px;padding:4px 7px;border:1px solid var(--wrm2-line-strong);border-radius:1px;background:var(--wrm2-canvas2);font:13px var(--wrm2-font);cursor:pointer;color:var(--wrm2-muted)}
:is(.wrm2-form,.wrm2-profile-settings) input[type="file"]::file-selector-button{margin-right:12px;height:32px;padding:4px 12px;background:var(--wrm2-panel2);color:var(--wrm2-mint);border:1px solid var(--wrm2-line-strong);border-radius:1px;font:900 11px/1 var(--wrm2-font);cursor:pointer}
:is(.wrm2-form,.wrm2-profile-settings) input[type="file"]:hover::file-selector-button{border-color:var(--wrm2-mint)}
/* DLE user xfields are table rows: render registration and profile labels consistently. */
:is(.wrm2-extra-fields,.wrm2-profile-settings-xfields) table{width:100%;border-collapse:collapse}
:is(.wrm2-extra-fields,.wrm2-profile-settings-xfields) tr{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:10px}
:is(.wrm2-extra-fields,.wrm2-profile-settings-xfields) td{display:block;min-width:0;padding:0}
:is(.wrm2-extra-fields,.wrm2-profile-settings-xfields) td:first-child{width:auto;color:var(--wrm2-muted);font:900 10px/1.3 var(--wrm2-font);letter-spacing:.1em;text-transform:uppercase}
:is(.wrm2-extra-fields,.wrm2-profile-settings-xfields) :is(input,textarea,select){width:100%;max-width:100%;min-width:0;box-sizing:border-box}

.wrm2-form #result-registration{font-size:12px;line-height:1.55;color:var(--wrm2-muted)}
.wrm2-form #result-registration :is(.error,.error-message){color:#ff7d91}
.wrm2-auth-checkbox{display:flex;align-items:center;gap:8px;color:var(--wrm2-muted);font-size:11px;margin-top:10px}
.wrm2-auth-submit{margin-top:13px;width:100%}
.wrm2-auth-divider{display:flex;align-items:center;gap:12px;margin:21px 0 15px;color:var(--wrm2-subtle);font-size:10px;letter-spacing:.1em}
.wrm2-auth-divider:before,.wrm2-auth-divider:after{content:"";height:1px;flex:1;background:var(--wrm2-line)}
.wrm2-provider-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wrm2-provider{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--wrm2-panel);border:1px solid var(--wrm2-line-strong);font-size:12px;font-weight:800}
.wrm2-provider:hover{border-color:var(--wrm2-mint)}
.wrm2-provider img,.wrm2-provider svg{width:20px;height:20px}
.wrm2-auth-remote{padding:12px 0;color:var(--wrm2-muted);min-height:50px}
.wrm2-auth-remote .wrm2-native-form{border:0;padding:0;margin:0;box-shadow:none}
.wrm2-auth-remote .wrm2-native-form>h1{display:none}
.wrm2-auth-remote .wrm2-native-form>p{display:none}
.wrm2-auth-remote-status{padding:12px 0;color:var(--wrm2-muted);font-size:12px;line-height:1.65}
.wrm2-auth-remote .wrm2-captcha{max-width:100%;overflow-x:auto}
.wrm2-auth-rules{display:grid;gap:13px;min-width:0}
.wrm2-auth-rules__scroll{box-sizing:border-box;max-height:min(340px,42dvh);min-height:130px;overflow-y:auto;overscroll-behavior:contain;min-width:0;padding:14px 16px;border:1px solid var(--wrm2-line-strong);background:var(--wrm2-panel);color:var(--wrm2-muted);font:12px/1.75 var(--wrm2-font);overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:var(--wrm2-mint) var(--wrm2-panel2)}
.wrm2-auth-rules__scroll:focus-visible{outline:2px solid var(--wrm2-mint);outline-offset:2px}
.wrm2-auth-rules__scroll :is(h1,h2,h3,h4,strong){color:var(--wrm2-text)}
.wrm2-auth-rules__scroll :is(h1,h2,h3,h4){margin:1em 0 .5em;line-height:1.35}
.wrm2-auth-rules__scroll :is(ul,ol){padding-left:22px}
.wrm2-auth-rules__scroll a{color:var(--wrm2-mint)}
.wrm2-auth-rules__scroll :is(img,video){max-width:100%;height:auto}
.wrm2-auth-rules__scroll table{display:block;max-width:100%;overflow:auto}
.wrm2-auth-rules__scroll::-webkit-scrollbar{width:8px}
.wrm2-auth-rules__scroll::-webkit-scrollbar-track{background:var(--wrm2-panel2)}
.wrm2-auth-rules__scroll::-webkit-scrollbar-thumb{background:var(--wrm2-mint)}
.wrm2-auth-rules__actions{display:flex;align-items:center;min-width:0}
.wrm2-auth-rules__actions .wrm2-btn{width:100%}

/* Google OAuth notices remain inside the native WRM2 auth dialog. */
.wrm2-auth-social-message{margin:0 0 17px}
.wrm2-auth-social-message[hidden]{display:none}
.wrm2-auth-social-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}
.wrm2-auth-social-actions>.wrm2-btn{min-width:0;min-height:41px;padding:8px;white-space:normal;overflow-wrap:anywhere}

.wrm2-auth-error{border:1px solid var(--wrm2-red);color:#ffc0cd;background:#ff315f15;padding:12px;font-size:12px;margin:10px 0}
.wrm2-auth-note{border:1px solid var(--wrm2-line-strong);padding:12px;background:var(--wrm2-panel);font-size:12px;color:var(--wrm2-text);margin:10px 0}

@media(max-width:470px){.wrm2-auth-head{padding:17px}.wrm2-auth-body{padding:17px}.wrm2-auth-head h2{font-size:21px}}

/* Stage 3.442: original modal controls, with balanced recovery actions. */
.wrm2-auth-recovery-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;min-width:0}
.wrm2-auth-recovery-actions>.wrm2-btn{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:10px 9px;white-space:normal;overflow-wrap:anywhere}
.wrm2-auth-dialog [data-auth-close]{box-sizing:border-box;width:32px;height:32px;flex:0 0 32px;padding:0;outline:0}
.wrm2-auth-dialog [data-auth-close]:focus-visible{border-color:var(--wrm2-mint)!important;outline:0}
.wrm2-auth-dialog .wrm2-captcha>a{display:inline-flex;align-items:center;min-height:80px}
.wrm2-auth-dialog .wrm2-captcha img{display:block;max-width:100%;height:auto}
.wrm2-auth-dialog :is(.wrm2-auth-note,.wrm2-auth-error){line-height:1.65;overflow-wrap:anywhere}
.wrm2-auth-dialog :is(.wrm2-auth-note,.wrm2-auth-error) strong{display:block;margin-bottom:8px}
.wrm2-auth-dialog :is(.wrm2-auth-note,.wrm2-auth-error) p{margin:0}

.wrm2-auth-dialog:focus{outline:0}

/* Linked-account result reuses the login dialog design on the authenticated page. */
#wrm2-google-linked-result .wrm2-auth-body{display:grid;gap:10px}
#wrm2-google-linked-result .wrm2-auth-note{margin:0}

/* Google social registration: finish the native DLE username step in the account dialog. */
.wrm2-auth-dialog .wrm2-google-finish-form>.wrm2-auth-remote-status{margin:0 0 10px;padding:0;line-height:1.65}
.wrm2-auth-dialog .wrm2-google-finish-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}
.wrm2-auth-dialog .wrm2-google-finish-actions>.wrm2-btn{min-width:0;min-height:44px;padding:9px 12px;white-space:normal}
.wrm2-auth-dialog .wrm2-google-finish-actions>.wrm2-btn-primary{grid-column:1/-1}
.wrm2-auth-dialog .wrm2-google-finish-actions>.wrm2-btn:not(.wrm2-btn-primary){grid-column:1/-1}
.wrm2-auth-dialog .wrm2-auth-tabs[hidden]{display:none}


/* SOURCE: core/toasts.css */
/* WR-META notifications — GGLYTICS UI Kit toast primitive. */
.wrm2-toast-stack {
  position: fixed;
  z-index: 1000;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: grid;
  align-content: end;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  gap: 8px;
  pointer-events: none;
}
.wrm2-toast {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 30px;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--wrm2-line-strong);
  background: var(--wrm2-canvas2);
  box-shadow: 0 20px 60px rgb(0 0 0 / .45);
  gap: 8px;
  min-width: 0;
  color: var(--wrm2-text);
  pointer-events: auto;
}
.wrm2-toast--info { border-left: 2px solid var(--wrm2-cyan); --wrm2-toast-accent: var(--wrm2-cyan); }
.wrm2-toast--success { border-left: 2px solid #30ff4c; --wrm2-toast-accent: #30ff4c; }
.wrm2-toast--warning { border-left: 2px solid var(--wrm2-yellow); --wrm2-toast-accent: var(--wrm2-yellow); }
.wrm2-toast--error { border-left: 2px solid var(--wrm2-red); --wrm2-toast-accent: var(--wrm2-red); }
.wrm2-toast__icon { width: 18px; height: 18px; color: var(--wrm2-toast-accent); }
.wrm2-toast__copy { min-width: 0; overflow-wrap: anywhere; }
.wrm2-toast__copy strong { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 900; line-height: 1.4; }
.wrm2-toast__copy p { margin: 0; color: var(--wrm2-muted); font-size: 11px; line-height: 1.55; white-space: pre-line; }
.wrm2-toast__dismiss{align-self:start}
@media (max-width: 600px) {
  .wrm2-toast-stack { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: min(380px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); }
}

/* Native DLE 14 ShowLoading()/HideLoading(): non-intrusive, mint progress
   line directly below the sticky header. This is the original #loading-layer,
   not a competing progress widget or a replacement AJAX handler. */
#loading-layer{
  position:fixed!important;
  top:var(--wrm2-notice-top,60px)!important;
  left:var(--wrm2-notice-left,0px)!important;
  width:var(--wrm2-notice-width,100vw)!important;
  height:3px!important;
  min-height:0;
  max-width:100vw;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(90deg,var(--wrm2-mint) 0 20%,#176d49 50%,var(--wrm2-mint) 80%);
  background-size:200% 100%;
  box-shadow:0 0 9px #1cfb8c80;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  overflow:hidden;
  box-sizing:border-box;
  z-index:90!important;
  pointer-events:none;
  animation:wrm2-loading-glide 1.1s linear infinite;
}
@keyframes wrm2-loading-glide{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){#loading-layer{animation:none;background:var(--wrm2-mint)}}


/* SOURCE: core/seo.css */
/* Shared Meta / Tier Maker informational SEO panel. One source of truth. */
.wrm2-meta-seo{border:1px solid var(--wrm2-line-strong);background:var(--wrm2-panel);padding:16px;min-width:0;margin-bottom:10px}
.wrm2-meta-seo h2{font:900 clamp(20px,2.2vw,27px)/1.2 var(--wrm2-display);margin:0 0 20px}
.wrm2-meta-seo h3{font:900 16px/1.3 var(--wrm2-font);margin:18px 0 10px;color:var(--wrm2-text)}
.wrm2-meta-seo p,.wrm2-meta-seo li{font-size:12px;line-height:1.8;color:var(--wrm2-muted)}
.wrm2-meta-seo strong{color:var(--wrm2-text)}
.wrm2-meta-seo ul{padding-left:22px;margin:9px 0}
@media(max-width:620px){.wrm2-meta-seo{padding:14px}}

/* Shared How It Works guide for Meta, Meta Shift and Tier Maker. */
.wrm2-meta-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:10px}
.wrm2-meta-guide-grid article,.wrm2-meta-model{border:1px solid var(--wrm2-line-strong);background:var(--wrm2-panel);padding:16px;min-width:0}
.wrm2-meta-model{margin-bottom:10px}
.wrm2-meta-guide-grid article>span{font-size:10px;color:var(--wrm2-mint)}
.wrm2-meta-guide-grid article h3,.wrm2-meta-model :is(h2,h3){font:900 14px/1.35 var(--wrm2-font);margin:12px 0}
.wrm2-meta-guide-grid article p,.wrm2-meta-model p:not(.wrm2-kicker){font-size:12px;line-height:1.65;color:var(--wrm2-muted);margin:0 0 8px}
.wrm2-meta-model :is(h2,h3){font:900 23px/1.2 var(--wrm2-display)}
@media(max-width:1150px){.wrm2-meta-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.wrm2-meta-guide-head{grid-template-columns:1fr}}
@media(max-width:620px){.wrm2-meta-guide-grid{grid-template-columns:1fr}}


/* SOURCE: core/champion-library.css */
/* Shared by home library and the six DLE champion category pages. Source: approved Stage 1.9. */
.wrm2-home-library{scroll-margin-top:90px}
.wrm2-library-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}
.wrm2-library-head h2{font:900 clamp(22px,2.4vw,32px)/1.1 var(--wrm2-display);letter-spacing:-.028em}
.wrm2-library-head p{margin:8px 0 0;font-size:11px;color:var(--wrm2-muted)}
.wrm2-champion-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:9px}
.wrm2-champion-card{min-width:0;background:var(--wrm2-panel);border:1px solid var(--wrm2-line);transition:border-color .15s,transform .15s}
.wrm2-champion-card:hover{border-color:var(--wrm2-mint);transform:translateY(-2px)}
.wrm2-champion-card>a{display:block;position:relative;overflow:hidden;color:var(--wrm2-text)!important}
.wrm2-champion-art{position:relative;aspect-ratio:1;overflow:hidden;background:#0c1212}
.wrm2-champion-art img{width:100%;height:100%;object-fit:cover;display:block}
.wrm2-champion-card--upcoming .wrm2-champion-art img{filter:grayscale(100%)}
.wrm2-champion-art>div{height:100%}
.wrm2-champion-name{display:block;padding:9px 23px 9px 9px;font:var(--wrm2-champion-link-type);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wrm2-champion-arrow{position:absolute;bottom:7px;right:8px;color:var(--wrm2-mint);font-size:13px}
.wrm2-search-empty{padding:25px;border:1px solid var(--wrm2-line);color:var(--wrm2-muted);text-align:center}
.wrm2-patch-label{margin:24px 0 10px;font-size:12px;font-weight:900;letter-spacing:.1em}
.wrm2-buff{color:#2bff65}
.wrm2-nerf{color:#ff1c5c}
.wrm2-rework{color:#ffaa38}
.wrm2-ajust{color:#1cdeff}
/* Shared champion role icons for Home spotlight and Full Story. */
.wrm2-role-icons{display:inline-flex;align-items:center;gap:6px}
.wrm2-role-icon{width:28px;height:28px;object-fit:contain}
.wrm2-seo{margin-top:30px;color:var(--wrm2-muted);font-size:12px;line-height:1.9}
.wrm2-seo h2,.wrm2-seo h3{color:var(--wrm2-text);margin:1.5em 0 .6em}
.wrm2-category-seo a{color:var(--wrm2-mint);text-decoration:underline;text-underline-offset:3px}
.wrm2-category-seo h2{font:900 clamp(20px,2.2vw,28px)/1.2 var(--wrm2-display);text-transform:uppercase;color:var(--wrm2-text);margin:0 0 16px}
@media(max-width:620px){.wrm2-category-seo h2{margin-bottom:14px}}
@media(max-width:1450px){.wrm2-champion-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:1280px){.wrm2-champion-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:960px){.wrm2-champion-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:620px){.wrm2-library-head{display:block}.wrm2-champion-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}}
@media(prefers-reduced-motion:reduce){.wrm2-champion-card{transition:none}}
.wrm2-champion-class-icon{display:block;flex:0 0 20px;width:20px;height:20px;margin-right:8px;object-fit:contain}
.wrm2-champion-class-icon--all{filter:brightness(0) saturate(100%) invert(79%) sepia(79%) saturate(594%) hue-rotate(83deg) brightness(105%) contrast(106%)}
.wrm2-champion-card:focus-within{border-color:var(--wrm2-mint)}


/* SOURCE: modules/champion-tiles.css */
/* Canonical WRM champion card: moved from Tier Maker, not copied. */
:is(.wrm2-tm-champion,.wrm2-creator--selector .wr-bc-champion-option){position:relative;display:grid;justify-items:center;align-content:start;grid-template-rows:53px 20px;width:86px;min-width:0;min-height:88px;flex:0 0 86px;padding:6px 4px 4px;gap:4px;border:1px solid var(--wrm2-line);background:var(--wrm2-panel);cursor:grab;user-select:none;transition:border-color .12s,background .12s;align-items:center}
:is(.wrm2-tm-champion,.wrm2-creator--selector .wr-bc-champion-option):is(:hover,:focus-visible){border-color:var(--wrm2-mint)}
.wrm2-tm-champion.is-selected{border-color:var(--wrm2-cyan);background:#60f0ff0e;box-shadow:0 0 0 1px #60f0ff55}
.wrm2-tm-champion.is-dragging{opacity:.5}
:is(.wrm2-tm-portrait,.wrm2-creator--selector .wr-bc-champion-option__art){width:52px;height:52px;border:1px solid var(--wrm2-line-strong);background:var(--wrm2-panel2);overflow:hidden}
:is(.wrm2-tm-portrait,.wrm2-creator--selector .wr-bc-champion-option__art) img{display:block;width:100%;height:100%;object-fit:cover}
:is(.wrm2-tm-champion>strong,.wrm2-creator--selector .wr-bc-champion-option__name){display:block;max-width:100%;overflow:hidden;color:var(--wrm2-text);font-size:9px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.wrm2-tm-champion.is-assigned :is(.wrm2-tm-portrait,.wrm2-creator--selector .wr-bc-champion-option__art){border-color:var(--tier-color)}
:is(.wrm2-tm-champion button[data-tm-remove],.wrm2-creator .wr-bc-remove-item){position:absolute;top:0;right:0;z-index:2;display:grid;width:20px;height:20px;padding:0;place-items:center;border:0;background:#060a0de8;color:#fff;font-size:16px;line-height:1}
:is(.wrm2-tm-champion button[data-tm-remove],.wrm2-creator .wr-bc-remove-item):hover{color:var(--wrm2-red)}

/* Shared compact tile sizing: both Tier Maker and Draft use the nearest size container. */
@container (max-width:620px){:is(.wrm2-tm-champion,.wrm2-creator--selector .wr-bc-champion-option){width:69px;flex-basis:69px;padding:6px 2px 4px}}
@container (max-width:420px){:is(.wrm2-tm-champion,.wrm2-creator--selector .wr-bc-champion-option){width:61px;flex-basis:61px}}


/* SOURCE: modules/champion-pool.css */
/* Shared Champion Pool controls: Tier Maker + Community Build Creator. */
.wrm2-tm-overline{color:var(--wrm2-mint);font-size:10px;font-weight:900;letter-spacing:.08em}
.wrm2-tm-pool-head{display:grid;gap:3px;padding:13px;border-bottom:1px solid var(--tm-border,var(--wrm2-line))}
.wrm2-tm-pool-head strong{font-size:12px}
.wrm2-tm-pool-toolbar{display:grid;gap:8px;padding:10px;border-bottom:1px solid var(--tm-border,var(--wrm2-line))}
.wrm2-tm-search{display:flex;min-height:38px;align-items:center;gap:6px;padding:0 8px}
.wrm2-tm-search>img{flex:0 0 18px;width:18px;height:18px}
.wrm2-tm-search input{height:36px;padding:7px 4px!important;font-size:11px}
.wrm2-tm-filter-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.wrm2-tm-pool-toolbar>span{color:var(--wrm2-muted);font-size:9px;font-weight:900;text-align:right;letter-spacing:.05em}
.wrm2-tm-pool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,86px),1fr));justify-items:center;align-content:start;min-width:0;min-height:180px;overflow:auto;padding:9px;gap:7px;scrollbar-width:thin}
.wrm2-tm-pool-grid .wrm2-tm-champion{max-width:100%}
.wrm2-tm-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}


/* SOURCE: modules/ads.css */
/* DLE banner slots outside the champion catalog keep their current behavior. */
.wrm2-ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--wrm2-line);
  background: var(--wrm2-panel);
  overflow: hidden;
}
.wrm2-ad-label { color: var(--wrm2-subtle); font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.wrm2-ad-slot:empty { display: none; }
.wrm2-ad-slot > * { max-width: 100%; }
.wrm2-home-ad { margin-top: 30px; }
.wrm2-home-ad .wrm2-ad-slot { min-height: 125px; }
.wrm2-mobile-ad { display: none; }

/* One rail width for its grid track, banner frame and OFF ADS button.
   Wide desktop: 300x600 Half Page; normal desktop: 160x600 Wide Skyscraper. */
.wrm2-ad-layout { --wrm2-rail-width: 160px; display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; align-items: start; }
.wrm2-ad-layout:has(> .wrm2-ad-rail) { grid-template-columns: minmax(0,1fr) var(--wrm2-rail-width); }
.wrm2-ad-results { min-width: 0; }
.wrm2-ad-rail { position: sticky; top: calc(var(--wrm2-bar) + 18px); display: grid; gap: 10px; width: var(--wrm2-rail-width); }
/* OFF ADS follows the rail width. The DLE AdSense unit is configured
   separately and is never scaled or resized by this stylesheet. */
.wrm2-ad-off-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--wrm2-rail-width);
  min-height: 42px;
  padding: 8px;
  border: 1px solid color-mix(in srgb,var(--wrm2-mint) 45%,var(--wrm2-line-strong));
  background: var(--wrm2-panel);
  color: var(--wrm2-text);
  font: 900 11px/1 var(--wrm2-font);
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease,border-color .15s ease;
}
.wrm2-ad-off-button img { display: block; flex: 0 0 24px; width: 24px; height: 24px; object-fit: contain; }
.wrm2-ad-off-button:hover { border-color: var(--wrm2-mint); background: rgb(28 251 140 / .08); }
.wrm2-ad-off-button:focus-visible { outline: 2px solid var(--wrm2-mint); outline-offset: 2px; }

/* The dashed outline belongs to the placement, not the fallback: it stays
   present if an actual AdSense creative occupies the slot later on. */
.wrm2-ad-frame {
  position: relative;
  isolation: isolate;
  min-width: 0;
  outline: 1px dashed var(--wrm2-line-strong);
  outline-offset: -1px;
  background: linear-gradient(135deg,var(--wrm2-canvas),var(--wrm2-panel2));
}
.wrm2-ad-frame--rail {
  width: var(--wrm2-rail-width);
  height: 600px;
}
.wrm2-ad-frame--anchor { width: 100%; height: 90px; }

/* Compact PRO creative, inspired by the GGLYTICS feature-gate. One real link. */
.wrm2-ad-pro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 17px;
  width: 100%;
  height: 100%;
  padding: 14px 10px;
  color: var(--wrm2-text);
  text-align: center;
  text-decoration: none;
}
.wrm2-ad-pro:hover,
.wrm2-ad-pro:focus-visible { background: rgb(28 251 140 / .06); outline: 1px solid var(--wrm2-mint); outline-offset: -2px; }
.wrm2-ad-pro-mark { display: grid; place-items: center; flex: 0 0 auto; width: 55px; height: 55px; background: rgb(28 251 140 / .06); border: 1px solid rgb(28 251 140 / .25); }
.wrm2-ad-pro-mark img { display: block; width: 42px; height: 42px; object-fit: contain; }
.wrm2-ad-pro-copy { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.wrm2-ad-pro-eyebrow { color: var(--wrm2-muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.wrm2-ad-pro-eyebrow b { color: var(--wrm2-mint); }
.wrm2-ad-pro-copy strong { font: 900 16px/1.2 var(--wrm2-display); color: var(--wrm2-text); }
.wrm2-ad-pro-description { color: var(--wrm2-muted); font-size: 11px; line-height: 1.65; }
.wrm2-ad-pro-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 80%; min-height: 35px; padding: 8px; border: 1px solid var(--wrm2-mint); background: rgb(28 251 140 / .12); color: var(--wrm2-mint); font-size: 10px; font-weight: 900; letter-spacing: .05em; }
.wrm2-ad-pro:hover .wrm2-ad-pro-action,
.wrm2-ad-pro:focus-visible .wrm2-ad-pro-action { background: var(--wrm2-mint); color: var(--wrm2-canvas); }

/* DLE banner output is layered ABOVE the house promotion, without hiding
   the AdSense unit while it requests an ad. The existing PRO creative is
   visible from first paint and remains in the background during loading.
   Once Google reports a fill, remove the PRO creative entirely so links,
   pointer events and visuals never cover a live advertisement. */
.wrm2-ad-provider{position:absolute;inset:0;display:none;width:100%;height:100%;overflow:hidden;text-align:center;pointer-events:none}
.wrm2-ad-provider>.adsbygoogle,
.wrm2-ad-provider .adsbygoogle{display:block;max-width:100%;margin-inline:auto}
.wrm2-ad-frame[data-ad-state="pending"] .wrm2-ad-provider,
.wrm2-ad-frame[data-ad-state="filled"] .wrm2-ad-provider{display:block}
.wrm2-ad-frame[data-ad-state="filled"] .wrm2-ad-provider{pointer-events:auto}
.wrm2-ad-frame[data-ad-state="filled"] .wrm2-ad-pro{display:none}
/* Server-rendered banner markup can be present before deferred ads.js runs.
   Keep the AdSense unit visible for sizing, but do NOT blank the PRO fallback. */
.wrm2-ad-frame:has(.wrm2-ad-provider>:not(script):not(style):not(template)):not([data-ad-state]) .wrm2-ad-provider{display:block}
/* The category-only bottom placement shares the very same PRO creative. */
.wrm2-champions-anchor { position: fixed; z-index: 24; right: 0; bottom: 16px; left: var(--wrm2-sidebar); display: flex; justify-content: center; padding: 0 18px; pointer-events: none; }
@media (min-width: 751px) { .wrm2-app.is-compact .wrm2-champions-anchor { left: var(--wrm2-side-small); } }
.wrm2-champions-anchor-inner { position: relative; width: min(728px,calc(100% - 24px)); height: 90px; pointer-events: auto; box-shadow: 0 14px 36px rgb(0 0 0 / .45); }
.wrm2-ad-frame--anchor .wrm2-ad-pro { flex-direction: row; justify-content: space-between; gap: 14px; padding: 10px 18px; text-align: left; }
.wrm2-ad-frame--anchor .wrm2-ad-pro-mark { width: 52px; height: 52px; }
.wrm2-ad-frame--anchor .wrm2-ad-pro-copy { flex: 1 1 auto; justify-items: start; gap: 3px; }
.wrm2-ad-frame--anchor .wrm2-ad-pro-copy strong { font-size: 15px; }
.wrm2-ad-frame--anchor .wrm2-ad-pro-description { font-size: 10px; }
.wrm2-ad-frame--anchor .wrm2-ad-pro-action { width: auto; min-width: 124px; flex: 0 0 auto; }
.wrm2-champions-anchor-hide { position: absolute; z-index: 1; top: -27px; left: 0; display: inline-flex; align-items: center; gap: 7px; min-height: 27px; padding: 0 9px; border: 1px solid var(--wrm2-line-strong); border-bottom: 0; background: var(--wrm2-mint); color: #07100b; font-weight: 900; font-size: 10px; letter-spacing: .08em; }
.wrm2-champions-anchor-hide img { width: 14px; height: 14px; filter: brightness(0); }
.wrm2-champions-anchor-hide:hover { background: #46ffa3; }
.wrm2-champions-anchor[hidden] { display: none; }


@media (min-width: 1600px) {
  .wrm2-ad-layout { --wrm2-rail-width: 300px; }
}
@media (max-width: 1419px) {
  .wrm2-ad-layout:has(> .wrm2-ad-rail) { grid-template-columns: minmax(0,1fr); }
  .wrm2-ad-rail { display: none; }
}
@media (max-width: 1090px) { .wrm2-champions-anchor { left: 72px; } }
/* Tablet portrait: follow the expanded sidebar without covering navigation. */
@media (min-width: 751px) and (max-width: 1090px) and (orientation: portrait) {
  .wrm2-app.is-expanded .wrm2-champions-anchor { left: var(--wrm2-sidebar); }
}
/* Only phones switch between the inline mobile/desktop ad placements. */
@media (max-width: 750px) {
  .wrm2-home-ad { display: none; }
  .wrm2-mobile-ad { display: block; margin: 12px 0; }
  .wrm2-mobile-ad .wrm2-ad-slot { min-height: 90px; }
  .wrm2-champions-anchor { left: 0; right: 0; }
}
/* Phone-like tall bottom anchor on phones AND portrait tablets.
   AdSense itself is untouched: only the WRM-2 placement changes size. */
@media (max-width: 750px), (min-width: 751px) and (max-width: 1090px) and (orientation: portrait) {
  .wrm2-champions-anchor { bottom: 12px; display: flex; padding: 0 10px; }
  .wrm2-champions-anchor-inner { width: 100%; height: 250px; min-width: 0; }
  .wrm2-ad-frame--anchor { height: 250px; }
  .wrm2-ad-frame--anchor .wrm2-ad-pro { flex-direction: column; justify-content: center; gap: 10px; padding: 14px; text-align: center; }
  .wrm2-ad-frame--anchor .wrm2-ad-pro-mark { width: 55px; height: 55px; }
  .wrm2-ad-frame--anchor .wrm2-ad-pro-mark img { width: 42px; height: 42px; }
  .wrm2-ad-frame--anchor .wrm2-ad-pro-copy { flex: 0 0 auto; justify-items: center; gap: 7px; }
  .wrm2-ad-frame--anchor .wrm2-ad-pro-copy strong { font-size: 16px; }
  .wrm2-ad-frame--anchor .wrm2-ad-pro-description,
  .wrm2-ad-frame--anchor .wrm2-ad-pro-eyebrow { display: initial; }
  .wrm2-ad-frame--anchor .wrm2-ad-pro-action { width: 100%; min-width: 0; min-height: 35px; padding: 8px; font-size: 10px; }
}


/* SOURCE: core/bbcode-editor.css */
/* WRM 2.0 — one BBCode editor component for Build Creator and DLE comments.
   Keep its visual rules HERE, not in page-specific override styles. */
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-mini-editor{position:relative;min-width:0;margin-top:12px;border:1px solid var(--wrbc-strong);background:var(--wrm2-canvas)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-editor-head{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;border-bottom:1px solid var(--wrbc-line)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-editor-head>span{font-size:10px;color:var(--wrm2-muted)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-editor-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:6px 8px;border-bottom:1px solid var(--wrbc-line)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-editor-toolbar .bb-btn{display:grid;place-items:center;box-sizing:border-box;min-width:30px;width:30px;min-height:30px;height:30px;padding:0;border:1px solid var(--wrbc-line);background:var(--wrm2-panel2);color:var(--wrm2-text);font:900 13px/1.2 var(--wrm2-font);cursor:pointer}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-editor-toolbar .bb-btn:hover{border-color:var(--wrm2-mint);color:var(--wrm2-mint)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-mini-editor textarea{width:100%;border:0;border-radius:0;min-height:100px;background:transparent}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-mini-editor textarea[hidden],:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-surface[hidden]{display:none!important}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-surface{box-sizing:border-box;min-height:112px;padding:13px 12px;background:transparent;color:var(--wrm2-text);font:400 12px/1.7 var(--wrm2-font);overflow-wrap:anywhere;white-space:pre-wrap;outline:0;cursor:text}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-surface:focus-visible{box-shadow:inset 0 0 0 1px var(--wrm2-mint)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-surface:empty::before{content:attr(data-placeholder);color:var(--wrm2-muted);pointer-events:none}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-surface strong{font-weight:900}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-surface em{font-style:italic}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-surface u{text-decoration:underline}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-surface s{text-decoration:line-through}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-surface ul{margin:6px 0 6px 19px;padding:0;list-style:disc}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-surface li{margin:2px 0}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-surface a{color:var(--wrm2-mint);text-decoration:underline}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-quote{margin:10px 0;padding:10px 13px;border:1px solid var(--wrbc-strong);border-left:3px solid var(--wrm2-mint);background:var(--wrm2-panel2);color:var(--wrm2-text);white-space:pre-wrap}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-quote__author{display:block;margin:0 0 7px;padding-bottom:7px;border-bottom:1px solid var(--wrbc-line);color:var(--wrm2-mint);font:900 10px/1.4 var(--wrm2-font);overflow-wrap:anywhere;user-select:none}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-quote__body{min-width:0}

:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-emoji{display:inline-block;width:24px;height:24px;max-width:none;object-fit:contain;vertical-align:middle;margin:0 2px}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-rich-emoji--stat{width:16px;height:16px;margin:0 1px}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-editor-toolbar .wr-bc-source-toggle{margin-left:auto;min-width:59px;width:auto;padding:0 7px;font-size:10px}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-editor-toolbar .wr-bc-source-toggle[aria-pressed="true"]{border-color:var(--wrm2-mint);color:var(--wrm2-mint);background:var(--wrm2-canvas)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-mini-editor>small{display:block;padding:4px 10px 8px;text-align:right}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-panel{position:absolute;z-index:10;top:43px;left:8px;right:8px;max-height:min(390px,65vh);display:flex;flex-direction:column;min-width:0;border:1px solid var(--wrbc-strong);background:var(--wrm2-panel)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-panel[hidden],:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-filters[hidden]{display:none!important}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-tabs{display:flex;gap:0;overflow-x:auto;flex:none;border-bottom:1px solid var(--wrbc-line)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-tab{flex:1 0 auto;min-width:56px;padding:10px 8px;border:0;border-right:1px solid var(--wrbc-line);background:var(--wrm2-canvas);color:var(--wrm2-muted);font:900 10px/1.2 var(--wrm2-font);cursor:pointer}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-tab.is-active{color:var(--wrm2-mint);background:var(--wrm2-panel2);box-shadow:inset 0 -2px var(--wrm2-mint)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-controls{flex:none;min-width:0;padding:7px 8px;border-bottom:1px solid var(--wrbc-line)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-search{display:block;box-sizing:border-box;width:100%;height:32px;padding:0 9px;border:1px solid var(--wrbc-line);border-radius:0;background:var(--wrm2-canvas);color:var(--wrm2-text);font:400 12px/1.2 var(--wrm2-font)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-search:focus{outline:1px solid var(--wrm2-mint);outline-offset:0}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-filters{display:flex;gap:4px;max-width:100%;overflow-x:auto;margin-top:7px}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-filter{flex:none;padding:6px 8px;border:1px solid var(--wrbc-line);background:var(--wrm2-canvas);color:var(--wrm2-muted);font:900 9px/1.2 var(--wrm2-font);cursor:pointer}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-filter.is-active{border-color:var(--wrm2-mint);color:var(--wrm2-mint)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-body{flex:1 1 auto;min-height:0;overflow:auto;padding:8px}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:5px}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-empty{grid-column:1/-1;margin:5px 0;color:var(--wrm2-muted);font-size:11px}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-item{display:grid;place-items:center;padding:4px;border:1px solid var(--wrbc-line);background:var(--wrm2-canvas)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-item img{width:28px;height:28px;object-fit:contain;margin:0}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-emoji-item .wr-bc-rich-emoji--stat{width:16px;height:16px}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-editor-toolbar [data-emoji-toggle]{font-size:0}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-editor-toolbar [data-emoji-toggle] img{display:none}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-editor-toolbar [data-emoji-toggle]::before{content:'';display:block;width:14px;height:14px;background:currentColor;-webkit-mask:url('../../ui/axe.svg') center/contain no-repeat;mask:url('../../ui/axe.svg') center/contain no-repeat}

:is(.wrm2-creator,.wrm2-comments-form) :is(.wr-bc-emoji-panel,.wr-bc-emoji-body,.wr-bc-emoji-tabs,.wr-bc-emoji-filters){scrollbar-width:thin;scrollbar-color:var(--wrm2-mint) var(--wrm2-panel2)}
:is(.wrm2-creator,.wrm2-comments-form) :is(.wr-bc-emoji-panel,.wr-bc-emoji-body,.wr-bc-emoji-tabs,.wr-bc-emoji-filters)::-webkit-scrollbar{width:6px;height:6px}
:is(.wrm2-creator,.wrm2-comments-form) :is(.wr-bc-emoji-panel,.wr-bc-emoji-body,.wr-bc-emoji-tabs,.wr-bc-emoji-filters)::-webkit-scrollbar-track{background:var(--wrm2-panel2)}
:is(.wrm2-creator,.wrm2-comments-form) :is(.wr-bc-emoji-panel,.wr-bc-emoji-body,.wr-bc-emoji-tabs,.wr-bc-emoji-filters)::-webkit-scrollbar-thumb{background:var(--wrm2-mint);border-radius:0}

/* Stage 3.193: compact legacy NEW color picker for all shared BBCode instances. */
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-editor-toolbar{position:relative}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-editor-toolbar .wr-bc-color-toggle{font-size:15px;text-decoration:underline;text-decoration-color:var(--wrm2-mint);text-underline-offset:3px}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-editor-toolbar .wr-bc-color-toggle[aria-expanded="true"]{border-color:var(--wrm2-mint);color:var(--wrm2-mint)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-color-panel{position:absolute;z-index:20;top:calc(100% + 2px);left:8px;box-sizing:border-box;width:min(340px,calc(100% - 16px));max-height:min(385px,65vh);overflow-y:auto;padding:10px;border:1px solid var(--wrbc-strong);background:var(--wrm2-panel);box-shadow:0 8px 22px rgba(0,0,0,.3)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-color-panel[hidden]{display:none!important}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-color-label{margin:0 0 7px;color:var(--wrm2-muted);font:900 10px/1.3 var(--wrm2-font)}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-color-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-color-swatch{display:block;aspect-ratio:1;min-width:0;padding:0;border:2px solid var(--wrbc-line);border-radius:0;background:var(--wrm2-swatch);cursor:pointer}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-color-swatch:hover,:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-color-swatch:focus-visible{outline:2px solid var(--wrm2-mint);outline-offset:1px}
:is(.wrm2-creator,.wrm2-comments-form) .wr-bc-color-panel{scrollbar-width:thin;scrollbar-color:var(--wrm2-mint) var(--wrm2-panel2)}


/* SOURCE: pages/build-creator.css */
/* WRM 2.0 / Stage 3.114. One clean source for selector and editor skins.
   Original DLE tags and .wr-bc-* hooks are retained to preserve creator JS/PHP. */
.wrm2-creator-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0}
.wrm2-creator-heading .wrm2-kicker{color:var(--wrm2-mint);font-size:10px;font-weight:900;letter-spacing:.1em}
.wrm2-creator-heading .wrm2-btn{flex:0 0 auto}
.wrm2-creator-heading--champion .wrm2-creator-back{margin-top:15px}
.wrm2-creator-heading .wr-bc-champion-badge{display:flex;align-items:center;gap:16px;flex:0 0 245px;padding:13px;border:1px solid var(--wrm2-line-strong);background:var(--wrm2-panel)}
.wrm2-creator-heading .wr-bc-champion-art{flex:0 0 72px;width:72px;height:72px;border:1px solid var(--wrm2-mint);overflow:hidden}
.wrm2-creator-heading .wr-bc-champion-art img{width:100%;height:100%;object-fit:cover}
.wrm2-creator-heading .wr-bc-champion-badge small{display:block;color:var(--wrm2-muted);font:800 9px/1.4 var(--wrm2-font);letter-spacing:.06em}
.wrm2-creator-heading .wr-bc-champion-badge strong{display:block;color:var(--wrm2-text);font:900 19px/1.1 var(--wrm2-display);text-transform:uppercase;overflow-wrap:anywhere}
.wrm2-creator{--wrbc-line:var(--wrm2-line);--wrbc-strong:var(--wrm2-line-strong);--wrbc-bg:var(--wrm2-canvas2);--wrbc-muted:var(--wrm2-muted);--wrbc-accent:var(--wrm2-mint);display:grid;gap:30px;min-width:0;color:var(--wrm2-text)}
.wrm2-creator .wr-bc-container{min-width:0}
.wrm2-creator .wrm2-tab-scroll-shell--steps{position:sticky;top:64px;z-index:12;min-width:0;max-width:100%;margin-bottom:20px}
.wrm2-creator .wrm2-tab-scroll-shell--steps>.wr-bc-stepnav{box-sizing:border-box;width:100%;background:var(--wrm2-canvas)}
.wrm2-creator :is(.wr-bc-stepnav,.wr-bc-skill-scroll,.wr-bc-picker-grid,.wr-bc-item-filters){scrollbar-width:thin;scrollbar-color:var(--wrm2-mint) var(--wrm2-panel2)}
.wrm2-creator :is(.wr-bc-stepnav,.wr-bc-skill-scroll,.wr-bc-picker-grid,.wr-bc-item-filters)::-webkit-scrollbar{width:6px;height:6px}
.wrm2-creator :is(.wr-bc-stepnav,.wr-bc-skill-scroll,.wr-bc-picker-grid,.wr-bc-item-filters)::-webkit-scrollbar-track{background:var(--wrm2-panel2)}
.wrm2-creator :is(.wr-bc-stepnav,.wr-bc-skill-scroll,.wr-bc-picker-grid,.wr-bc-item-filters)::-webkit-scrollbar-thumb{background:var(--wrm2-mint);border-radius:0}
.wrm2-creator .wr-bc-stepnav{display:flex;min-width:0;max-width:100%;margin-bottom:0;overflow-x:auto}
.wrm2-creator .wr-bc-stepnav button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:93px;min-height:44px;font:900 11px/1.2 var(--wrm2-font);letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.wrm2-creator .wr-bc-stepnav button:disabled{opacity:.38;cursor:default}
.wrm2-creator .wr-bc-stepnav button>span{display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--wrm2-line-strong);font:900 9px/1 var(--wrm2-font);color:var(--wrm2-muted)}
.wrm2-creator .wr-bc-stepnav button.current{border-bottom-color:var(--wrm2-mint);background:#1cfb8c0b;color:var(--wrm2-mint)}
.wrm2-creator .wr-bc-stepnav button.current>span{border-color:var(--wrm2-mint);color:var(--wrm2-mint)}
.wrm2-creator .wr-bc-stepnav button.done:not(.current){color:var(--wrm2-text)}
.wrm2-creator .wr-bc-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,245px);align-items:start;gap:10px;min-width:0}
.wrm2-creator .wr-bc-main{display:grid;gap:10px;min-width:0}
.wrm2-creator .wr-bc-panel,.wrm2-creator .wr-bc-selector-panel{padding:16px;border:1px solid var(--wrbc-strong);background:var(--wrm2-panel);min-width:0}
.wrm2-creator .wr-bc-panel-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:16px}
.wrm2-creator .wr-bc-panel h2{font:900 clamp(18px,2vw,25px)/1.22 var(--wrm2-display);text-transform:uppercase;letter-spacing:0}
.wrm2-creator .wr-bc-panel h3{font:900 13px/1.3 var(--wrm2-font);text-transform:uppercase}
.wrm2-creator .wr-bc-panel p{margin:7px 0 0;color:var(--wrm2-muted);font-size:11px;line-height:1.7}
.wrm2-creator .wr-bc-kicker{display:block;margin-bottom:9px;color:var(--wrm2-mint);font:900 10px/1.2 var(--wrm2-font);letter-spacing:.1em;text-transform:uppercase}
.wrm2-creator .wr-bc-field{display:grid;gap:7px;margin:16px 0}
.wrm2-creator .wr-bc-field>label,.wrm2-creator .wr-bc-editor-head label{font:900 11px/1.4 var(--wrm2-font);text-transform:uppercase;color:var(--wrm2-text)}
.wrm2-creator .wr-bc-field label b,.wrm2-creator .wr-bc-item-group h3 b,.wrm2-creator .wr-bc-rune-page h3 b{color:var(--wrm2-red)}
.wrm2-creator input[type=text],.wrm2-creator input[type=search],.wrm2-creator textarea{display:block;max-width:100%;width:100%;min-width:0;min-height:40px;padding:11px 12px;border:1px solid var(--wrbc-strong);border-radius:0;outline:none;background:var(--wrm2-canvas);color:var(--wrm2-text);font:500 12px/1.5 var(--wrm2-font)}
.wrm2-creator textarea{min-height:95px;resize:vertical}
.wrm2-creator :is(input,textarea):focus{border-color:var(--wrm2-mint)}
.wrm2-creator .wr-bc-field small{justify-self:end;color:var(--wrm2-muted);font-size:10px}
.wrm2-creator .wr-bc-role-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.wrm2-creator :is(.wr-bc-role-grid,.wr-bc-tree-buttons,.wr-bc-item-filters) .wrm2-toolbar-button{min-width:0;gap:6px}
.wrm2-creator :is(.wr-bc-role-grid,.wr-bc-tree-buttons,.wr-bc-item-filters) button:is(:hover,.current){border-color:var(--wrm2-mint);color:var(--wrm2-mint);background:#1cfb8c10}
.wrm2-creator .wr-bc-role-icon{flex:0 0 20px;width:20px;height:20px;object-fit:contain;filter:brightness(0) saturate(100%) invert(74%) sepia(63%) saturate(548%) hue-rotate(92deg)}
.wrm2-creator .wr-bc-item-group{margin:10px 0;padding:10px;border:1px solid var(--wrbc-line);background:var(--wrm2-canvas)}
/* Reuse the site's 38px toolbar buttons across the creator action UI. */
.wrm2-creator .wrm2-toolbar-button{min-height:38px;height:38px;padding:0 13px}
.wrm2-creator .wr-bc-remove-danger{border-color:var(--wrm2-red);color:var(--wrm2-red)!important;background:color-mix(in srgb,var(--wrm2-red) 7%,var(--wrm2-panel2))}
.wrm2-creator .wr-bc-remove-danger:is(:hover,:focus-visible){border-color:var(--wrm2-red)!important;background:color-mix(in srgb,var(--wrm2-red) 17%,var(--wrm2-panel2))}
.wrm2-creator :is(.wr-bc-role-grid,.wr-bc-tree-buttons,.wr-bc-item-filters) .wrm2-btn:is(.current,:hover,:focus-visible){color:var(--wrm2-mint)!important}
.wrm2-creator .wr-bc-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;min-width:0;flex-wrap:wrap}
.wrm2-creator .wr-bc-group-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 1 auto;flex-wrap:wrap;margin-left:auto}
.wrm2-creator .wr-bc-group-actions .wrm2-btn{white-space:nowrap}

.wrm2-creator .wr-bc-group-head p{margin-top:3px;font-size:10px}
.wrm2-creator .wr-bc-selected{display:flex;flex-wrap:wrap;min-height:72px;gap:8px;padding:7px;border:1px dashed var(--wrm2-line-strong);align-items:flex-start}
.wrm2-creator .wr-bc-selected:empty::before{content:'Add items to this group';color:var(--wrm2-subtle);font:800 10px/1.2 var(--wrm2-font);align-self:center;margin:auto}
.wrm2-creator .wr-bc-selected:is(.picker-active,.drag-over){border-color:var(--wrm2-mint);background:color-mix(in srgb,var(--wrm2-mint) 7%,var(--wrm2-canvas));box-shadow:inset 0 0 0 1px var(--wrm2-mint)}
.wrm2-creator .wr-bc-selected.drag-copy-target{border-color:var(--wrm2-cyan,#60f0ff);box-shadow:inset 0 0 0 1px var(--wrm2-cyan,#60f0ff)}
.wrm2-creator .wr-bc-drop-placeholder{flex:0 0 81px;width:81px;min-height:97px;align-self:stretch;border:2px dashed var(--wrm2-mint);background:color-mix(in srgb,var(--wrm2-mint) 12%,var(--wrm2-canvas));pointer-events:none;position:relative}
.wrm2-creator .wr-bc-drop-placeholder::after{content:'MOVE';position:absolute;inset:0;display:grid;place-items:center;color:var(--wrm2-mint);font:900 10px/1 var(--wrm2-font)}
.wrm2-creator .wr-bc-drop-placeholder.is-copy{border-color:var(--wrm2-cyan,#60f0ff);background:color-mix(in srgb,var(--wrm2-cyan,#60f0ff) 12%,var(--wrm2-canvas))}
.wrm2-creator .wr-bc-drop-placeholder.is-copy::after{content:'+ COPY';color:var(--wrm2-cyan,#60f0ff)}
.wrm2-creator .wr-bc-selected-card.dragging,.wrm2-creator .wr-bc-library-card.dragging{opacity:.4}

.wrm2-creator .wr-bc-selected-card{--wrm2-game-size:55px;position:relative;display:grid;justify-items:center;gap:5px;flex:0 0 81px;width:81px;min-width:0;margin:0;padding:6px 5px 9px;border:1px solid var(--wrbc-line);background:var(--wrbc-bg);cursor:grab}
/* Shared compact frames and colors come from core/game-icons.css.
   Only Creator-specific card geometry belongs here; never override tones. */
.wrm2-creator .wr-bc-selected-name,.wrm2-creator .wr-bc-card-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-align:center;font-size:9px;line-height:1.3;color:var(--wrm2-muted);min-height:24px;overflow-wrap:anywhere}
.wrm2-creator .wr-bc-mobile-moves{display:none;gap:3px}
.wrm2-creator .wr-bc-mobile-moves button{padding:0 5px;background:var(--wrm2-panel2);border:1px solid var(--wrbc-line);color:var(--wrm2-text)}
.wrm2-creator .wr-bc-custom-actions,.wrm2-creator .wr-bc-alt-add{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:17px 0}
.wrm2-creator .wr-bc-custom-actions small{color:var(--wrm2-muted);font-size:10px}
.wrm2-creator .wr-bc-custom-group,.wrm2-creator .wr-bc-rune-page,.wrm2-creator .wr-bc-alt-block{padding:10px;margin:10px 0;border:1px solid var(--wrbc-strong);background:var(--wrm2-canvas)}
.wrm2-creator .wr-bc-custom-top,.wrm2-creator .wr-bc-alt-head{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:10px}
.wrm2-creator .wr-bc-tree-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;margin-bottom:12px}
.wrm2-creator .wr-bc-rune-page>h3{margin:16px 0 10px}
.wrm2-creator .wr-bc-rune-rows{display:grid;gap:10px;margin-top:10px}
.wrm2-creator .wr-bc-rune-rows>div{display:grid;grid-template-columns:75px 1fr;align-items:center;gap:9px}
.wrm2-creator .wr-bc-rune-rows>div>span{font-size:10px;color:var(--wrm2-muted);font-weight:900}
.wrm2-creator .wr-bc-rune-grid,.wrm2-creator .wr-bc-spell-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:7px}
.wrm2-creator .wr-bc-library-card{--wrm2-game-size:52px;position:relative;display:grid;justify-items:center;align-content:start;gap:7px;min-width:0;width:100%;flex-basis:auto;margin:0;padding:9px 5px 7px;border:1px solid var(--wrbc-line);background:var(--wrm2-canvas);color:var(--wrm2-muted);cursor:pointer}
.wrm2-creator .wr-bc-library-card.current,.wrm2-creator .wr-bc-library-card:hover{border-color:var(--wrm2-mint);background:#1cfb8c10;color:var(--wrm2-text)}
/* Stage 3.125: six optional matchup/synergy groups reuse button, editor and grid primitives. */
.wrm2-creator .wr-bc-matchups{position:relative;min-width:0;margin:16px 0 10px;padding:10px;border:1px solid var(--wrbc-strong);background:var(--wrm2-canvas)}
.wrm2-creator .wr-bc-matchups-intro{margin-bottom:12px}
.wrm2-creator .wr-bc-matchups-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0}
.wrm2-creator .wr-bc-matchup-family{min-width:0}
.wrm2-creator .wr-bc-matchup-family>h3{display:flex;justify-content:space-between;gap:6px;padding-bottom:9px;border-bottom:1px solid var(--wrbc-line)}
.wrm2-creator .wr-bc-matchup-family>h3>span{color:var(--wrm2-muted);font:800 9px/1.5 var(--wrm2-font)}
.wrm2-creator .wr-bc-matchup-group{--cb-tone:var(--wrm2-mint);min-width:0;margin-top:10px;padding:10px;border:1px solid var(--wrbc-line);border-top:3px solid var(--cb-tone);background:var(--wrm2-panel)}
.wrm2-creator .wr-bc-matchup-group[data-tone=red]{--cb-tone:var(--wrm2-red,#ff1c5c)}
.wrm2-creator .wr-bc-matchup-group[data-tone=yellow]{--cb-tone:#ffaa38}
.wrm2-creator .wr-bc-matchup-group[data-tone=green]{--cb-tone:var(--wrm2-mint)}
.wrm2-creator .wr-bc-matchup-heading{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:9px}
.wrm2-creator .wr-bc-matchup-heading strong{flex:1 1 115px;color:var(--cb-tone);font:900 10px/1.3 var(--wrm2-font)}
.wrm2-creator .wr-bc-matchup-heading>span{color:var(--wrm2-muted);font:800 9px/1.2 var(--wrm2-font)}
.wrm2-creator .wr-bc-matchup-heading>.wrm2-btn{height:32px;min-height:32px;padding:0 7px;font-size:9px}
.wrm2-creator .wr-bc-matchup-items{display:grid;align-content:start;gap:6px;min-height:54px;padding:5px;border:1px dashed var(--wrbc-strong);background:var(--wrm2-canvas)}
.wrm2-creator .wr-bc-matchup-items:empty{align-content:center;justify-items:center}
.wrm2-creator .wr-bc-matchup-items:empty::before{content:'Drop champions here';color:var(--wrm2-muted);font:800 10px/1.4 var(--wrm2-font)}
.wrm2-creator .wr-bc-matchup-items.drag-over{border-color:var(--cb-tone);background:color-mix(in srgb,var(--cb-tone) 7%,var(--wrm2-canvas))}
.wrm2-creator .wr-bc-matchup-placeholder{display:grid;place-items:center;height:56px;border:2px dashed var(--wrm2-mint);color:var(--wrm2-mint);font:900 10px/1.2 var(--wrm2-font)}
.wrm2-creator .wr-bc-matchup-placeholder.is-copy{border-color:var(--wrm2-cyan,#60f0ff);color:var(--wrm2-cyan,#60f0ff)}
.wrm2-creator .wr-bc-matchup-card{min-width:0;border:1px solid var(--wrbc-line);background:var(--wrm2-panel2)}
.wrm2-creator .wr-bc-matchup-card.dragging{opacity:.4}
.wrm2-creator .wr-bc-matchup-card-main{display:flex;align-items:center;gap:7px;padding:5px;min-width:0}
.wrm2-creator .wr-bc-matchup-card-main>img{flex:0 0 43px;width:43px;height:43px;object-fit:cover;border:1px solid var(--cb-tone)}
.wrm2-creator .wr-bc-matchup-card-main>strong{flex:1 1 50px;min-width:0;color:var(--wrm2-text);font:900 10px/1.3 var(--wrm2-font);overflow-wrap:anywhere}
.wrm2-creator .wr-bc-matchup-card-actions{display:flex;align-items:center;gap:5px}
.wrm2-creator .wr-bc-matchup-card-actions .wrm2-toolbar-button{min-height:28px;height:28px;padding:0 5px;font:900 9px/1 var(--wrm2-font)}
.wrm2-creator .wr-bc-matchup-remove{box-sizing:border-box;display:grid;place-items:center;flex:0 0 28px;min-width:28px;min-height:28px;width:28px;height:28px;padding:0;aspect-ratio:1;border-radius:0;color:var(--wrm2-red,#ff1c5c);border-color:var(--wrm2-red,#ff1c5c);font-size:16px}
.wrm2-creator .wr-bc-matchup-note{margin:0;border:0;border-top:1px solid var(--wrbc-line)}
.wrm2-creator .wr-bc-matchup-picker .wr-bc-picker-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
.wrm2-creator .wr-bc-matchup-pool-card{display:grid;justify-items:center;align-content:start;gap:5px;min-width:0;padding:7px 4px;border:1px solid var(--wrbc-line);color:var(--wrm2-text);background:var(--wrm2-canvas);cursor:grab}
.wrm2-creator .wr-bc-matchup-pool-card:is(:hover,[aria-pressed="true"]){border-color:var(--wrm2-mint)}
.wrm2-creator .wr-bc-matchup-pool-card:disabled{opacity:.55;cursor:not-allowed}
.wrm2-creator .wr-bc-matchup-pool-card>img{width:54px;height:54px;object-fit:cover}
.wrm2-creator .wr-bc-matchup-pool-card>span{font:900 9px/1.3 var(--wrm2-font);text-align:center;overflow-wrap:anywhere}
.wrm2-creator .wr-bc-matchup-pool-card[hidden],.wrm2-creator .wr-bc-matchup-picker[hidden],.wrm2-creator .wr-bc-matchup-note[hidden]{display:none!important}
/* Masking shares the toolbar's currentColor in both normal and hover states. */
@media(max-width:900px){.wrm2-creator .wr-bc-matchups-columns{grid-template-columns:1fr}}
@media(max-width:450px){.wrm2-creator .wr-bc-matchup-card-actions .wrm2-toolbar-button{font-size:8px}}

/* Skill Order follows NEW's 15-column square matrix, using WRM 2.0 type and tones.
   At narrow widths the matrix scrolls; its level cells never shrink into rectangles. */
.wrm2-creator .wr-bc-skill-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;max-width:100%;padding-bottom:6px}
/* Keep each level cell at least as tall as the skill portrait row; preserve true squares at every breakpoint. */
.wrm2-creator .wr-bc-skill-grid{min-width:900px;border:1px solid var(--wrbc-line)}
.wrm2-creator .wr-bc-skill-header,.wrm2-creator .wr-bc-skill-row{display:grid;grid-template-columns:170px minmax(0,1fr)}
.wrm2-creator .wr-bc-skill-header{background:var(--wrm2-panel);color:var(--wrm2-muted);font:900 10px/1.2 var(--wrm2-font)}
.wrm2-creator .wr-bc-skill-header>span{display:grid;place-items:center;text-align:center;border-right:1px solid var(--wrm2-line)}
.wrm2-creator .wr-bc-skill-header>div,.wrm2-creator .wr-bc-skill-cells{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:1px;background:var(--wrbc-line)}
.wrm2-creator .wr-bc-skill-header>div span{display:grid;place-items:center;min-height:27px;background:var(--wrm2-panel)}
.wrm2-creator .wr-bc-skill-row{border-top:1px solid var(--wrbc-line)}
.wrm2-creator .wr-bc-skill-info{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;border-right:1px solid var(--wrm2-line)}
.wrm2-creator .wr-bc-skill-info img{width:35px;height:35px;flex:0 0 35px;border:1px solid var(--wrm2-mint);object-fit:cover}
.wrm2-creator .wr-bc-skill-info span{display:flex;align-items:baseline;align-content:center;flex-wrap:wrap;column-gap:6px;row-gap:1px;min-width:0;font:800 10px/1.3 var(--wrm2-font);overflow-wrap:anywhere}
.wrm2-creator .wr-bc-skill-info b{flex:0 0 auto;color:var(--wrm2-skill-color);font:900 11px/1.2 var(--wrm2-font)}
.wrm2-creator .wr-bc-skill-cells button{display:grid;place-items:center;width:100%;height:auto;min-width:0;min-height:0;aspect-ratio:1/1;padding:0;border:1px solid transparent;border-radius:0;background:var(--wrm2-canvas2);box-shadow:none;color:var(--wrm2-muted);font:900 11px/1 var(--wrm2-font);cursor:pointer}
.wrm2-creator .wr-bc-skill-cells button:is(:hover,:focus-visible){border-color:var(--wrm2-skill-color)}
.wrm2-creator .wr-bc-skill-row[data-skill="Q"]{--wrm2-skill-color:#fff500}
.wrm2-creator .wr-bc-skill-row[data-skill="W"]{--wrm2-skill-color:#2bff65}
.wrm2-creator .wr-bc-skill-row[data-skill="E"]{--wrm2-skill-color:#60f0ff}
.wrm2-creator .wr-bc-skill-row[data-skill="R"]{--wrm2-skill-color:#ff1c5c}
.wrm2-creator .wr-bc-skill-cells button.current{border:1px solid var(--wrm2-skill-color);background:color-mix(in srgb,var(--wrm2-skill-color) 15%,var(--wrm2-canvas));box-shadow:none;color:var(--wrm2-skill-color)}
.wrm2-creator .wr-bc-skill-cells button:disabled:not(.current){cursor:not-allowed;opacity:.7}
.wrm2-creator .wr-bc-skill-row--automatic .wr-bc-skill-cells button{opacity:.25}
.wrm2-creator .wr-bc-skill-status{margin-top:7px;color:var(--wrm2-muted);font:800 10px/1.35 var(--wrm2-font)}

.wrm2-creator .wr-bc-summary{position:sticky;top:120px;padding:16px;border:1px solid var(--wrbc-strong);background:var(--wrm2-panel)}
.wrm2-creator .wr-bc-summary-champion{display:flex;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1px solid var(--wrbc-line)}
.wrm2-creator .wr-bc-summary-avatar img{display:block;width:58px;height:58px;border:1px solid var(--wrm2-mint);object-fit:cover}
.wrm2-creator .wr-bc-summary-champion :is(span,small){display:block;font:800 9px/1.45 var(--wrm2-font);color:var(--wrm2-muted)}
.wrm2-creator .wr-bc-summary-champion strong{display:block;font:900 15px/1.3 var(--wrm2-display);text-transform:uppercase}
.wrm2-creator .wr-bc-progress{margin:16px 0}
.wrm2-creator .wr-bc-progress>div:first-child{display:flex;justify-content:space-between;font:900 10px/1.3 var(--wrm2-font)}
.wrm2-creator .wr-bc-progress-track{margin-top:8px;height:6px;background:var(--wrbc-line);overflow:hidden}
.wrm2-creator .wr-bc-progress-track span{display:block;height:100%;width:0;background:var(--wrm2-mint);transition:width .2s}
/* Selector summary inherits the live editor progress styles. */
.wrm2-creator .wr-bc-summary-champion .wr-bc-selector-summary__avatar{display:grid;place-items:center;flex:0 0 58px;width:58px;height:58px;border:1px solid var(--wrm2-mint);background:#1cfb8c0b}
.wrm2-creator .wr-bc-selector-summary__avatar img{display:block;width:30px;height:30px;object-fit:contain;align-self:center;justify-self:center}
.wrm2-creator .wr-bc-selector-summary .wr-bc-summary-champion>div{min-width:0}
.wrm2-creator .wr-bc-selector-summary .wr-bc-summary-champion>div>span{color:var(--wrm2-mint)}
.wrm2-creator .wr-bc-selector-summary__hint{margin:15px 0 0;padding:12px;border:1px solid var(--wrbc-line);font-size:11px;line-height:1.65;color:var(--wrm2-muted)}
.wrm2-creator .wrm2-creator-checklist{display:grid;gap:0;margin:16px 0;padding:0;list-style:none;border:1px solid var(--wrbc-line)}
.wrm2-creator .wrm2-creator-checklist li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--wrbc-line);font-size:10px}
.wrm2-creator .wrm2-creator-checklist li:last-child{border-bottom:0}
.wrm2-creator .wrm2-creator-checklist li>span{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;color:var(--wrm2-subtle);font:900 10px/1 var(--wrm2-font)}
.wrm2-creator .wrm2-creator-checklist li:is(.is-current,.done){color:var(--wrm2-mint)}
.wrm2-creator .wrm2-creator-checklist li.is-current{background:#1cfb8c0d}
.wrm2-creator .wrm2-creator-checklist li:is(.is-current,.done)>span{color:var(--wrm2-mint)}
/* Selector: shared Tier Maker pool toolbar and champion tiles; no copied tile skin. */
.wrm2-creator--selector .wrm2-creator-pool{min-width:0;container-type:inline-size;border:1px solid var(--wrm2-line);background:var(--wrm2-panel)}
.wrm2-creator--selector .wrm2-tm-search{min-height:40px}
.wrm2-creator--selector .wrm2-tm-search input{min-height:38px;padding:7px 5px;border:0;outline:0;box-shadow:none;background:transparent}
.wrm2-creator--selector .wrm2-tm-filter-row .wrm2-meta-dropdown{min-width:0}
.wrm2-creator--selector .wrm2-tm-pool-grid{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));justify-items:center;align-content:start;max-height:570px;min-height:188px;overscroll-behavior:contain}
.wrm2-creator--selector .wr-bc-champion-option{color:var(--wrm2-text);cursor:pointer;text-decoration:none}
.wrm2-creator--selector .wr-bc-champion-option:hover{background:#1cfb8c0b}
.wrm2-creator--selector .wr-bc-champion-option__go{display:none}
.wrm2-creator--selector .wr-bc-champion-option__art--empty{display:grid;place-items:center;color:var(--wrm2-muted)}
.wrm2-creator--selector .wr-bc-selector-empty{padding:18px;border-top:1px solid var(--wrbc-line);text-align:center;color:var(--wrm2-muted)}
.wrm2-creator--selector .wr-bc-selector-empty>*{display:block;margin:5px auto}
.wrm2-creator--selector .wrm2-creator-pool-status{margin:10px 0 0;color:var(--wrm2-muted);font-size:10px;line-height:1.5}
.wrm2-creator--selector .wrm2-creator-guide{margin-top:30px}
.wrm2-creator--selector .wrm2-creator-faq{margin-top:10px}
.wrm2-creator .wr-bc-seo-container{display:grid;gap:0px;min-width:0}
.wrm2-creator .wr-bc-publish{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px}
.wrm2-creator .wr-bc-captcha{max-width:100%;min-width:200px}
.wrm2-creator .wr-bc-captcha img{max-width:100%}
.wrm2-creator .wr-bc-native-xfields,.wrm2-creator .wr-bc-library-source{display:none!important}
.wrm2-creator .wr-bc-picker{position:fixed;inset:0;z-index:110;display:grid;place-items:center}
.wrm2-creator .wr-bc-picker-backdrop{position:absolute;inset:0;background:#000b}
.wrm2-creator .wr-bc-picker-sheet{position:relative;display:flex;flex-direction:column;width:min(990px,calc(100vw - 30px));max-height:90dvh;border:1px solid var(--wrbc-strong);background:var(--wrm2-panel);overflow:hidden}
.wrm2-creator .wr-bc-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;border-bottom:1px solid var(--wrbc-line)}
.wrm2-creator .wr-bc-picker-head h3{margin-top:4px}
.wrm2-creator .wr-bc-picker-head span{font:900 10px/1.2 var(--wrm2-font);color:var(--wrm2-mint)}
.wrm2-creator .wr-bc-picker-tools{padding:12px;border-bottom:1px solid var(--wrbc-line)}
.wrm2-creator .wr-bc-search{position:relative;gap:8px;padding:0 10px;min-height:40px}
.wrm2-creator .wr-bc-search>img{flex:0 0 18px;width:18px;height:18px}
.wrm2-creator .wr-bc-search input[type=search]{width:100%;min-height:38px;padding:7px 5px;border:0;background:transparent;box-shadow:none}
.wrm2-creator .wr-bc-item-filters{display:flex;gap:5px;margin-top:10px;overflow-x:auto;padding-bottom:5px}
.wrm2-creator .wr-bc-item-filters button{flex:0 0 auto}
.wrm2-creator .wr-bc-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px;padding:12px;min-height:110px;overflow:auto}
.wrm2-creator .wr-bc-picker.inline{position:relative;inset:auto;display:block;z-index:9;margin:12px 0}
.wrm2-creator .wr-bc-picker.inline .wr-bc-picker-backdrop{display:none}
.wrm2-creator .wr-bc-picker.inline .wr-bc-picker-sheet{max-height:510px;width:100%}
.wrm2-creator .wr-bc-picker-empty{padding:22px;color:var(--wrm2-muted)}
.wrm2-creator [hidden]{display:none!important}
@media(max-width:1120px){.wrm2-creator .wr-bc-layout{grid-template-columns:minmax(0,1fr)}.wrm2-creator .wr-bc-summary{position:static}.wrm2-creator .wr-bc-aside{display:block}}
@media(max-width:720px){.wrm2-creator-heading{align-items:start;flex-direction:column}.wrm2-creator-heading .wr-bc-champion-badge{flex:0 0 auto;width:100%}.wrm2-creator .wrm2-tab-scroll-shell--steps{top:54px}.wrm2-creator .wr-bc-stepnav button{min-width:74px}.wrm2-creator .wr-bc-stepnav button>span{display:none}.wrm2-creator .wr-bc-panel{padding:15px}.wrm2-creator .wr-bc-role-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.wrm2-creator .wr-bc-group-head{align-items:stretch;flex-direction:column}.wrm2-creator .wr-bc-group-actions{justify-content:flex-end;align-self:stretch;margin-left:0}.wrm2-creator .wr-bc-rune-rows>div{grid-template-columns:1fr}.wrm2-creator .wr-bc-publish{display:grid}.wrm2-creator .wr-bc-picker:not(.inline) .wr-bc-picker-sheet{max-height:100dvh;width:100vw;height:100dvh}.wrm2-creator .wr-bc-picker-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.wrm2-creator .wr-bc-mobile-moves{display:flex}.wrm2-creator .wr-bc-selected-card{flex-basis:72px;width:72px}}
@media(max-width:420px){.wrm2-creator .wr-bc-drop-placeholder{flex-basis:64px;width:64px;min-height:83px}.wrm2-creator .wr-bc-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wrm2-creator--selector .wrm2-tm-pool-grid{grid-template-columns:repeat(auto-fill,minmax(61px,1fr));gap:5px}.wrm2-creator .wr-bc-rune-grid,.wrm2-creator .wr-bc-spell-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.wrm2-creator .wr-bc-selected-card{flex-basis:64px;width:64px;padding:5px 2px;--wrm2-game-size:49px}}

/* Creator runtime builds move arrows with legacy icon classes: draw without icon-font dependency. */
.wrm2-creator .wr-bc-mobile-moves button[data-move="-1"]::before{content:"←"}
.wrm2-creator .wr-bc-mobile-moves button[data-move="1"]::before{content:"→"}

/* Guest publication / own selector and field geometry. */
.wrm2-creator .wrm2-guest-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:17px 0}
.wrm2-creator .wrm2-guest-fields .wr-bc-field{margin:0}
.wrm2-creator .wrm2-guest-fields .wrm2-guest-notice{grid-column:1/-1;color:var(--wrm2-muted);font-size:11px}
.wrm2-creator .wrm2-guest-fields label{font:900 11px/1.4 var(--wrm2-font);color:var(--wrm2-text)}
@media(max-width:620px){.wrm2-creator .wrm2-guest-fields{grid-template-columns:minmax(0,1fr)}}

/* Stage 3.80 / Post-submission confirmation, one canonical component. */
.wrm2-build-submitted{min-width:0;display:grid;gap:15px}
.wrm2-submitted-hero{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--wrm2-line-strong);background:radial-gradient(ellipse at 12% 90%,#1cfb8c18,transparent 54%),linear-gradient(116deg,#111c1b 0%,#0c1215 70%);color:var(--wrm2-text)}
.wrm2-submitted-hero::before{content:"";position:absolute;right:-110px;top:-210px;width:500px;height:500px;border:1px solid #1cfb8c23;border-radius:50%;box-shadow:0 0 0 60px #1cfb8c08,0 0 0 120px #1cfb8c06;z-index:-1;pointer-events:none}
.wrm2-submitted-topline{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:18px 27px;border-bottom:1px solid var(--wrm2-line-strong)}
.wrm2-submitted-wordmark{font:900 10px/1.4 var(--wrm2-font);letter-spacing:.1em;color:var(--wrm2-text)}
.wrm2-submitted-wordmark span{color:var(--wrm2-mint);margin:0 5px}
.wrm2-submitted-status{display:inline-flex;align-items:center;gap:8px;color:var(--wrm2-mint);font:900 10px/1.2 var(--wrm2-font);letter-spacing:.08em}
.wrm2-submitted-status>span,.wrm2-submitted-pending>span{display:inline-block;width:7px;height:7px;background:var(--wrm2-mint);box-shadow:0 0 10px #1cfb8c77}
.wrm2-submitted-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(275px,.48fr);gap:clamp(22px,4vw,65px);align-items:center;padding:clamp(28px,4.5vw,68px) clamp(22px,4vw,58px)}
.wrm2-submitted-message{min-width:0}
.wrm2-submitted-emblem{display:grid;place-items:center;width:64px;height:64px;margin-bottom:26px;border:1px solid var(--wrm2-mint);background:#1cfb8c12;box-shadow:inset 0 0 0 6px #1cfb8c08}
.wrm2-submitted-emblem img{width:34px;height:34px;filter:brightness(0) saturate(100%) invert(80%) sepia(59%) saturate(613%) hue-rotate(84deg) brightness(107%)}
.wrm2-submitted-kicker{margin:0 0 13px!important;font:900 11px/1.3 var(--wrm2-font);letter-spacing:.13em;color:var(--wrm2-mint)}
.wrm2-submitted-message h1{margin:0;font:900 clamp(30px,4.4vw,64px)/1.04 var(--wrm2-display);letter-spacing:-.035em;text-transform:uppercase;max-width:840px;margin-bottom:24px}
.wrm2-submitted-message h1 span{display:block;color:var(--wrm2-mint)}
.wrm2-submitted-lead{max-width:590px;margin:21px 0 0;font:400 13px/1.8 var(--wrm2-font);color:var(--wrm2-muted)}
.wrm2-submitted-cta{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.wrm2-submitted-action{display:inline-flex;justify-content:center;align-items:center;gap:16px;min-height:43px;padding:10px 16px;font:900 10px/1.3 var(--wrm2-font);letter-spacing:.035em;text-align:center;text-decoration:none;white-space:normal}
.wrm2-submitted-action--outline{border:1px solid var(--wrm2-line-strong);background:var(--wrm2-canvas2);color:var(--wrm2-text)}
.wrm2-submitted-action--outline:hover,.wrm2-submitted-action--outline:focus-visible{border-color:var(--wrm2-mint);color:var(--wrm2-mint)}
.wrm2-submitted-action:focus-visible{outline:2px solid var(--wrm2-mint);outline-offset:3px}
.wrm2-submitted-build{min-width:0;padding:20px 21px;background:linear-gradient(160deg,#172422,#10181b);border:1px solid #1cfb8c55;box-shadow:12px 12px 0 #1cfb8c09}
.wrm2-submitted-build-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--wrm2-line-strong);font:900 10px/1.35 var(--wrm2-font);letter-spacing:.07em;color:var(--wrm2-muted)}
.wrm2-submitted-build-head span:last-child{color:var(--wrm2-mint);font-variant-numeric:tabular-nums}
.wrm2-submitted-champion{display:flex;align-items:center;gap:14px;margin:21px 0 18px}
.wrm2-submitted-avatar{flex:0 0 78px;width:78px;height:78px;border:1px solid var(--wrm2-mint);background:var(--wrm2-canvas)}
.wrm2-submitted-avatar img{width:100%;height:100%;object-fit:cover}
.wrm2-submitted-micro{display:block;color:var(--wrm2-mint);font:900 9px/1.4 var(--wrm2-font);letter-spacing:.07em}
.wrm2-submitted-champion strong{display:block;margin:5px 0;font:900 clamp(17px,2vw,25px)/1.15 var(--wrm2-display);overflow-wrap:anywhere;text-transform:uppercase}
.wrm2-submitted-champion small{display:block;color:var(--wrm2-muted);font-size:11px}
.wrm2-submitted-build-title{padding:14px 0;border-top:1px solid var(--wrm2-line-strong);color:var(--wrm2-text);font:900 14px/1.35 var(--wrm2-font);overflow-wrap:anywhere}
.wrm2-submitted-receipt-line{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:5px 15px;margin-top:12px}
.wrm2-submitted-receipt-line>span{font:900 9px/1.3 var(--wrm2-font);color:var(--wrm2-muted);letter-spacing:.05em}
.wrm2-submitted-receipt-line strong{font:900 10px/1.35 var(--wrm2-font);text-align:right;overflow-wrap:anywhere}
.wrm2-submitted-pending{color:var(--wrm2-yellow);display:inline-flex;align-items:center;gap:7px}
.wrm2-submitted-pending>span{background:var(--wrm2-yellow);box-shadow:none}
.wrm2-submitted-published{color:var(--wrm2-mint);display:inline-flex;align-items:center;gap:7px}
.wrm2-submitted-published>span{display:inline-block;width:7px;height:7px;background:var(--wrm2-mint);box-shadow:0 0 10px #1cfb8c77}
.wrm2-submitted-hero-bottom{display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;gap:12px;padding:13px 24px;border-top:1px solid var(--wrm2-line-strong);color:var(--wrm2-muted);font:900 9px/1.4 var(--wrm2-font);letter-spacing:.08em}
.wrm2-submitted-hero-bottom span:nth-child(even){color:var(--wrm2-mint)}
.wrm2-submitted-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:0}
.wrm2-submitted-progress-step{display:flex;align-items:center;gap:15px;min-width:0;padding:19px 17px;background:var(--wrm2-canvas2);border:1px solid var(--wrm2-line-strong)}
.wrm2-submitted-progress-step.is-complete{border-left:3px solid var(--wrm2-mint)}
.wrm2-submitted-progress-step.is-current{border-left:3px solid var(--wrm2-yellow)}
.wrm2-submitted-step-number{flex:0 0 auto;color:var(--wrm2-muted);font:900 25px/1 var(--wrm2-display)}
.wrm2-submitted-progress-step.is-complete .wrm2-submitted-step-number{color:var(--wrm2-mint)}
.wrm2-submitted-progress-step.is-current .wrm2-submitted-step-number{color:var(--wrm2-yellow)}
.wrm2-submitted-progress-step>div{flex:1 1 auto;min-width:0}
.wrm2-submitted-progress-step strong{display:block;font:900 10px/1.3 var(--wrm2-font);letter-spacing:.04em}
.wrm2-submitted-progress-step p{margin:5px 0 0;font:400 10px/1.5 var(--wrm2-font);color:var(--wrm2-muted)}
.wrm2-submitted-step-state{color:var(--wrm2-muted);font:900 9px/1.25 var(--wrm2-font);text-align:right}
.wrm2-submitted-progress-step.is-current .wrm2-submitted-step-state{color:var(--wrm2-yellow)}
.wrm2-submitted-progress-step.is-complete .wrm2-submitted-step-state{display:flex;align-items:center;justify-content:center;color:var(--wrm2-mint)}
.wrm2-submitted-step-state img{display:block;width:20px;height:20px}
@media(max-width:1120px){.wrm2-submitted-stage{grid-template-columns:minmax(0,1fr) minmax(250px,.58fr);gap:23px}.wrm2-submitted-progress-step{flex-wrap:wrap;gap:10px}.wrm2-submitted-step-state{margin-left:auto}}
@media(max-width:900px){.wrm2-submitted-stage{grid-template-columns:minmax(0,1fr)}.wrm2-submitted-build{width:100%}}
@media(max-width:600px){.wrm2-submitted-topline{padding:15px;gap:9px}.wrm2-submitted-stage{padding:27px 16px}.wrm2-submitted-emblem{margin-bottom:19px;width:56px;height:56px}.wrm2-submitted-lead{font-size:12px;margin-top:16px}.wrm2-submitted-cta{display:grid;grid-template-columns:minmax(0,1fr);margin-top:23px}.wrm2-submitted-build{padding:17px 15px}.wrm2-submitted-progress{grid-template-columns:minmax(0,1fr);gap:7px}.wrm2-submitted-progress-step{flex-wrap:nowrap;padding:14px}.wrm2-submitted-hero-bottom{padding:12px}.wrm2-submitted-hero-bottom span:nth-child(n+4){display:none}}

/* Stage 3.119: nested descriptions reuse the existing mini-editor component. */
.wrm2-creator .wr-bc-item-group>.wr-bc-section-note{margin-top:12px}
.wrm2-creator .wr-bc-alt-note{display:grid;gap:10px;margin-top:12px}
.wrm2-creator .wr-bc-alt-note>.wr-bc-note-toggle{justify-self:start}
.wrm2-creator .wr-bc-custom-group>.wr-bc-section-note{margin-top:12px}
.wrm2-creator .wr-bc-section-note[hidden],.wrm2-creator [data-primary-rune-details][hidden],.wrm2-creator [data-secondary-path][hidden]{display:none!important}
.wrm2-creator .wr-bc-secondary-path>h3{margin-top:16px}
.wrm2-creator .wr-bc-picker-head .wr-bc-picker-close{align-self:center}


/* SOURCE: pages/content.css */
.wrm2-content-generic{margin-inline:auto}
.wrm2-story{margin-bottom:0}
.wrm2-story h1,.wrm2-story h2{margin:12px 0 12px}
.wrm2-story h2{font:900 clamp(18px,2.2vw,29px)/1.2 var(--wrm2-display)}
.wrm2-story-copy{overflow-wrap:anywhere;color:var(--wrm2-muted);font:13px/1.85 var(--wrm2-font)}
.wrm2-story-copy img{max-width:100%;height:auto}
.wrm2-story-meta,.wrm2-story-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;color:var(--wrm2-subtle);font-size:11px}
.wrm2-story-meta{margin-top:22px;padding-top:13px;border-top:1px solid var(--wrm2-line)}
.wrm2-story-meta a{margin-left:auto;color:var(--wrm2-mint)}
.wrm2-story-full .wrm2-story-meta{margin:0 0 22px;padding:0 0 15px;border-top:0;border-bottom:1px solid var(--wrm2-line)}
.wrm2-story-actions{margin-top:26px}
.wrm2-content-generic :where(input,select,textarea){max-width:100%}