:root {
  --bg: #040b14;
  --bg-2: #071522;
  --panel: rgba(7, 18, 31, 0.88);
  --panel-strong: rgba(5, 15, 27, 0.96);
  --panel-soft: rgba(12, 27, 43, 0.72);
  --line: rgba(114, 169, 216, 0.18);
  --line-strong: rgba(77, 190, 255, 0.44);
  --text: #f4f7fb;
  --muted: #8fa4b9;
  --blue: #26b9ff;
  --blue-2: #0876d9;
  --gold: #d6a53a;
  --gold-2: #f4d172;
  --danger: #ff6175;
  --good: #58e6a8;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 24px 70px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; }

::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.025); }
::-webkit-scrollbar-thumb { background: rgba(116,157,191,.26); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(116,157,191,.42); }

#app { min-height: 100vh; }

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(0, 136, 255, .12), transparent 34%),
    linear-gradient(180deg, #071522, #030810);
}
.boot-screen img { width: 86px; height: 96px; object-fit: contain; }
.boot-screen p { margin: 0; color: var(--muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.boot-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12); border-top-color: var(--blue);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(18px, 3vw, 46px);
  background: linear-gradient(180deg, rgba(3,10,18,.97), rgba(3,10,18,.78));
  border-bottom: 1px solid rgba(139,183,221,.12);
  backdrop-filter: blur(18px);
}
.brand {
  display: inline-flex;
  align-items: flex-end;
  width: max-content;
  gap: 1px;
  cursor: pointer;
  user-select: none;
}
.brand-mark { width: 52px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(37,173,255,.16)); }
.brand-lb { width: 54px; height: 31px; margin-bottom: 8px; object-fit: contain; object-position: left bottom; }
.top-nav { display: flex; align-items: center; gap: clamp(18px, 3.6vw, 56px); }
.nav-link {
  position: relative;
  border: 0;
  background: none;
  color: #9bafc3;
  padding: 10px 3px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .105em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.nav-link:hover, .nav-link.active { color: #f6f9fc; }
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 14px var(--gold);
  transform: translateX(-50%);
}
.profile-wrap { justify-self: end; position: relative; }
.profile-button {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(213,165,58,.6);
  background: radial-gradient(circle at 50% 35%, #173654, #081522 64%);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.28), 0 0 0 1px rgba(44,185,255,.12);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.profile-button:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 3px rgba(0,0,0,.28), 0 0 20px rgba(38,185,255,.15); }
.profile-button svg { width: 21px; height: 21px; opacity: .88; }
.profile-menu {
  position: absolute; top: 54px; right: 0;
  width: 210px;
  padding: 8px;
  border-radius: 13px;
  background: rgba(4,13,24,.98);
  border: 1px solid rgba(117,174,218,.18);
  box-shadow: 0 22px 60px rgba(0,0,0,.48);
  transform-origin: top right;
  animation: pop .14s ease-out;
}
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.profile-menu button {
  width: 100%; display: flex; align-items: center; gap: 10px;
  border: 0; background: transparent; border-radius: 8px;
  color: #c9d6e1; text-align: left; padding: 10px 11px; cursor: pointer; font-size: 13px;
}
.profile-menu button:hover { background: rgba(38,185,255,.08); color: #fff; }
.profile-menu .danger { color: #e58c99; }
.profile-menu hr { border: 0; border-top: 1px solid rgba(255,255,255,.07); margin: 6px 4px; }

.page { min-height: 100vh; padding-top: 76px; }
.landing {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #06101b;
}
.landing::before {
  content: "";
  position: absolute; inset: 0;
  background: url('/assets/summoners-rift-blur.png') center / cover no-repeat;
  filter: saturate(.72) brightness(.56);
  transform: scale(1.035);
}
.landing::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(3,9,17,.7) 0%, rgba(3,10,18,.28) 28%, rgba(3,10,18,.5) 62%, rgba(3,9,17,.95) 100%),
    radial-gradient(circle at 50% 38%, rgba(20,121,178,.08), transparent 42%);
  pointer-events: none;
}
.landing-inner {
  position: relative; z-index: 2;
  min-height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 66px 0 50px;
}
.hero-copy { text-align: center; margin-bottom: 28px; padding: 0 18px; }
.hero-kicker { color: var(--gold-2); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 800; opacity: .9; }
.hero-title { margin: 7px 0 0; font-size: clamp(28px, 4vw, 51px); line-height: 1.02; letter-spacing: -.045em; font-weight: 750; }
.hero-subtitle { margin: 13px auto 0; color: #9eafc0; max-width: 620px; font-size: 14px; line-height: 1.6; }

.champion-strip {
  width: 100%;
  margin: 0 auto 30px;
  overflow: hidden;
  padding: 4px 0 8px;
  mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}
.champion-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: championMarquee 360s linear infinite;
}
.champion-strip:hover .champion-track { animation-play-state: paused; }
.champion-group { display: flex; align-items: center; gap: 10px; padding-right: 10px; }
.champion-chip {
  flex: 0 0 auto;
  width: 58px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.champion-frame {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  padding: 2px;
  clip-path: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
  background: linear-gradient(145deg, #e2bb63, #5c4316 48%, #41b6e7 100%);
  box-shadow: 0 7px 18px rgba(0,0,0,.32);
  transition: transform .18s ease, filter .18s ease;
}
.champion-frame::after { content: ""; position: absolute; inset: 2px; border: 1px solid rgba(255,255,255,.1); pointer-events: none; clip-path: inherit; }
.champion-frame img { display:block; width:100%; height:100%; object-fit:cover; clip-path:inherit; background:#0a1724; }
.champion-chip:hover .champion-frame, .champion-chip:focus-visible .champion-frame { transform: translateY(-3px) scale(1.06); filter: brightness(1.14); }
.champion-chip:focus-visible { outline: none; }
@keyframes championMarquee {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .champion-track { animation-play-state: paused; }
}

.search-stage { width: min(760px, calc(100vw - 38px)); margin: 0 auto; position: relative; }
.search-wrap { position: relative; }
.champion-search {
  width: 100%; height: 66px;
  border: 1px solid rgba(98,168,216,.28);
  border-radius: 14px;
  outline: none;
  color: #f2f8fc;
  background: rgba(3,13,24,.84);
  box-shadow: 0 20px 55px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035);
  padding: 0 58px 0 23px;
  font-size: 17px;
  transition: border-color .2s, box-shadow .2s;
  backdrop-filter: blur(16px);
}
.champion-search:focus { border-color: rgba(38,185,255,.65); box-shadow: 0 20px 55px rgba(0,0,0,.42), 0 0 0 3px rgba(38,185,255,.07); }
.search-icon { position: absolute; right: 20px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: #78a0bc; pointer-events: none; }
.search-suggestions {
  position: absolute; z-index: 10; left: 0; right: 0; top: 74px;
  padding: 8px;
  max-height: 360px; overflow-y: auto;
  background: rgba(4,13,23,.98);
  border: 1px solid rgba(94,156,203,.22);
  border-radius: 13px;
  box-shadow: var(--shadow);
}
.search-result {
  width: 100%; height: 56px; border: 0; border-radius: 8px;
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px;
  background: transparent; padding: 5px 10px; cursor: pointer; text-align: left;
}
.search-result:hover, .search-result.focused { background: rgba(38,185,255,.085); }
.search-result img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }
.search-result strong { display: block; font-size: 13px; }
.search-result span { display: block; color: #778ea2; font-size: 11px; margin-top: 2px; }
.search-result em { color: #59758d; font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }

.random-row { display: flex; justify-content: center; margin-top: 18px; }
.random-button {
  min-width: 118px; height: 50px;
  border: 1px solid rgba(216,171,70,.36);
  border-radius: 13px;
  background: rgba(6,17,29,.72);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: #d7e3ed;
  cursor: pointer;
  box-shadow: 0 12px 35px rgba(0,0,0,.2);
  backdrop-filter: blur(10px);
}
.random-button:hover { border-color: rgba(235,194,94,.68); background: rgba(10,25,41,.82); }
.random-button svg { width: 23px; height: 23px; color: var(--gold-2); }
.random-button.rolling .random-button-dice { animation: diceRoll .5s linear; }
@keyframes diceRoll { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }


.content-page {
  min-height: calc(100vh - 76px);
  background:
    radial-gradient(circle at 50% -10%, rgba(22,105,161,.12), transparent 36%),
    linear-gradient(180deg, #07131f 0%, #030911 85%);
  padding: 42px clamp(18px, 4vw, 64px) 80px;
}
.page-shell { max-width: 1320px; margin: 0 auto; }
.page-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 24px; }
.page-heading h1 { margin: 0; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.035em; }
.page-heading p { margin: 8px 0 0; color: var(--muted); max-width: 600px; line-height: 1.5; }
.champion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.champion-grid-card {
  border: 1px solid rgba(108,161,204,.16); border-radius: 13px; padding: 8px;
  background: rgba(10,23,37,.7); cursor: pointer; text-align: left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.champion-grid-card:hover { transform: translateY(-3px); border-color: rgba(37,185,255,.38); background: rgba(12,29,46,.86); }
.champion-card-image { position:relative; display:block; width:100%; aspect-ratio:1; overflow:hidden; border-radius:9px; }
.champion-grid-card img { width: 100%; height:100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; }
.champion-add-overlay { position:absolute; inset:0; display:grid; place-items:center; font-size:46px; font-weight:250; color:#f7e3a6; background:rgba(2,10,18,.42); opacity:.78; text-shadow:0 0 18px rgba(38,185,255,.55), 0 2px 8px rgba(0,0,0,.8); transition:opacity .18s ease, background .18s ease, transform .18s ease; }
.upload-champion-card:hover .champion-add-overlay { opacity:1; background:rgba(2,12,21,.24); transform:scale(1.08); }
.champion-grid-card strong { display: block; margin-top: 8px; font-size: 12px; }
.champion-grid-card span { color: #748b9e; font-size: 10px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

.news-placeholder, .empty-state {
  border: 1px solid rgba(111,163,205,.17); border-radius: 18px;
  background: rgba(8,20,33,.76); padding: 48px 24px; text-align: center; color: var(--muted);
}
.news-placeholder svg, .empty-state svg { width: 44px; height: 44px; color: #4f89b0; margin: 0 auto 15px; }
.news-placeholder h2, .empty-state h2 { color: var(--text); margin: 0 0 8px; }
.news-placeholder p, .empty-state p { max-width: 540px; margin: 0 auto; line-height: 1.6; }

.champion-page { min-height: 100vh; background: #050c14; padding-top: 76px; }
.champion-hero {
  position: relative;
  min-height: 325px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid rgba(112,164,204,.13);
}
.champion-hero-bg { position: absolute; inset: 0; background-position: center 28%; background-size: cover; filter: saturate(.88) contrast(1.02); transform: scale(1.02); }
.champion-hero::before { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(3,9,15,.12), rgba(3,10,17,.62) 58%, #050c14 100%), linear-gradient(90deg, rgba(3,9,15,.55), transparent 52%); }
.champion-hero-content { position: relative; z-index: 2; width: min(1320px, calc(100% - 36px)); margin: 0 auto; padding: 90px 0 36px; display: flex; align-items: flex-end; gap: 20px; }
.hero-portrait { width: 105px; height: 105px; padding: 3px; background: linear-gradient(145deg, #e9c66e, #5f4519 54%, #35aee7); clip-path: polygon(10% 0,90% 0,100% 10%,100% 90%,90% 100%,10% 100%,0 90%,0 10%); flex: 0 0 auto; }
.hero-portrait img { width:100%; height:100%; object-fit:cover; clip-path:inherit; }
.champion-title-block { min-width:0; }
.champion-title-block .eyebrow { color: var(--gold-2); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; font-weight: 800; }
.champion-title-block h1 { margin: 0 0 7px; font-size: clamp(34px, 5vw, 58px); line-height: 1; letter-spacing: -.045em; }
.champion-build-select { min-width:min(430px,65vw); max-width:100%; height:38px; padding:0 36px 0 11px; border-radius:9px; border:1px solid rgba(214,171,70,.32); background:rgba(3,13,23,.68); color:#f3e4b0; font-size:12px; font-weight:750; outline:none; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
.champion-build-select:focus { border-color:rgba(244,209,114,.7); box-shadow:0 0 0 3px rgba(214,165,58,.08); }
.champion-title-block p { margin: 7px 0 0; color: #a8bac8; font-size: 14px; }
.role-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.role-pill { border:1px solid rgba(106,168,214,.24); background:rgba(4,15,26,.45); color:#a8c4d8; padding:5px 8px; border-radius:999px; font-size:9px; text-transform:uppercase; letter-spacing:.12em; }
.hero-actions { margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.editor-badge { height:34px; padding:0 11px; display:inline-flex; align-items:center; border:1px solid rgba(38,185,255,.3); border-radius:999px; background:rgba(17,117,166,.13); color:#8edaff; font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }

.builder-wrap { width: min(1320px, calc(100% - 36px)); margin: 0 auto; padding: 30px 0 78px; }
.builder-toolbar { display: grid; grid-template-columns: minmax(220px, 1.25fr) repeat(2, minmax(140px,.55fr)) auto; gap: 10px; margin-bottom: 16px; }
.builder-toolbar.view-toolbar { grid-template-columns:minmax(240px,1.35fr) minmax(140px,.5fr) minmax(160px,.58fr); }
.build-display-name { min-height:43px; border:1px solid rgba(104,159,202,.13); border-radius:10px; background:rgba(8,20,33,.62); padding:7px 12px; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.build-display-name span { color:#60788c; font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.build-display-name strong { margin-top:2px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.input, .select, .textarea {
  width:100%; border:1px solid rgba(104,159,202,.17); border-radius:10px; color:#e9f0f5;
  background:rgba(8,20,33,.88); outline:none; padding:0 12px; height:43px;
}
.input:focus, .select:focus, .textarea:focus { border-color: rgba(38,185,255,.52); box-shadow:0 0 0 3px rgba(38,185,255,.055); }
.select { cursor:pointer; }
.btn {
  height:43px; border-radius:10px; padding:0 15px; border:1px solid rgba(104,159,202,.2); background:rgba(9,24,39,.9); color:#d9e5ed; cursor:pointer; font-weight:700; font-size:12px;
}
.btn:hover { border-color:rgba(38,185,255,.4); background:rgba(13,33,53,.95); }
.btn.primary { background:linear-gradient(180deg,#159bd7,#0b6da9); border-color:#32baf5; color:white; box-shadow:0 8px 22px rgba(8,126,188,.18); }
.btn.gold { background:linear-gradient(180deg,#b68a2a,#7c5b19); border-color:#d4ae53; color:#fff8df; }
.btn.ghost { background:rgba(5,15,25,.42); }
.btn.small { height:34px; padding:0 11px; font-size:11px; }
.builder-grid { display:grid; grid-template-columns: minmax(0,1.5fr) minmax(310px,.72fr); gap:16px; align-items:start; }
.builder-main, .builder-side { display:grid; gap:16px; }
.build-card { border:1px solid rgba(105,160,202,.15); border-radius:16px; background:linear-gradient(180deg,rgba(9,22,36,.95),rgba(5,15,25,.94)); box-shadow:0 18px 45px rgba(0,0,0,.16); overflow:hidden; }
.card-head { min-height:58px; padding:14px 17px; border-bottom:1px solid rgba(255,255,255,.055); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-head h2 { margin:0; font-size:16px; letter-spacing:.015em; }
.card-head p { margin:4px 0 0; color:#6f879a; font-size:11px; }
.card-body { padding:16px; }

.passive-row { display:flex; gap:12px; padding:12px 16px 0; align-items:center; }
.passive-row img { width:42px; height:42px; border-radius:8px; border:1px solid rgba(214,172,70,.35); }
.passive-row strong { display:block; font-size:12px; }
.passive-row span { display:block; color:#738a9e; font-size:10px; margin-top:3px; }
.skill-table { overflow-x:auto; padding:14px 16px 18px; }
.skill-grid { min-width: 700px; display:grid; grid-template-columns: 44px repeat(18, 1fr); gap:5px; align-items:center; }
.level-header { color:#5f768a; text-align:center; font-size:9px; padding-bottom:5px; }
.skill-label { display:flex; align-items:center; justify-content:center; min-width:0; padding-right:2px; }
.skill-label img { width:36px; height:36px; border-radius:7px; border:1px solid rgba(97,155,198,.22); }
.skill-label strong { display:none; }
.skill-label span { display:none; }
.skill-cell {
  aspect-ratio:1; min-width:25px; border-radius:6px; border:1px solid rgba(114,164,201,.13); background:rgba(255,255,255,.025); cursor:pointer; display:grid; place-items:center; font-size:9px; color:#6c8396;
}
.skill-cell:hover { border-color:rgba(38,185,255,.4); background:rgba(38,185,255,.07); }
.skill-cell.readonly { cursor:default; }
.skill-cell.readonly:hover { border-color:rgba(114,164,201,.13); background:rgba(255,255,255,.025); }
.skill-cell.readonly.selected:hover { border-color:rgba(218,174,70,.7); background:linear-gradient(145deg,rgba(190,136,29,.45),rgba(19,95,132,.42)); }
.skill-cell.selected { border-color:rgba(218,174,70,.7); background:linear-gradient(145deg,rgba(190,136,29,.45),rgba(19,95,132,.42)); color:#fff4d4; box-shadow:inset 0 0 14px rgba(255,210,92,.07); }

.slot-row { display:grid; grid-template-columns: repeat(6,1fr); gap:10px; }
.starter-budget { flex:0 0 auto; border:1px solid rgba(218,174,70,.28); border-radius:999px; padding:5px 9px; color:#ead18a; background:rgba(180,126,26,.08); font-size:10px; font-weight:800; letter-spacing:.03em; }
.starter-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.starter-option { min-width:0; padding:12px; border:1px solid rgba(105,161,203,.13); border-radius:12px; background:rgba(2,11,19,.38); }
.starter-option-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.starter-option-head strong { min-width:0; font-size:12px; color:#e4edf3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.starter-option-head span { flex:0 0 auto; color:#718a9d; font-size:9px; }
.starter-slot-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.starter-slot { width:100%; }
.starter-price { position:absolute; left:4px; bottom:4px; padding:2px 5px; border-radius:5px; background:rgba(2,8,14,.8); color:#d9e4eb; font-size:8px; line-height:1; }
.item-slot, .spell-slot {
  position:relative; aspect-ratio:1; border:1px dashed rgba(105,161,203,.27); border-radius:11px; background:rgba(255,255,255,.025); display:grid; place-items:center; cursor:pointer; overflow:hidden;
}
.item-slot:hover, .spell-slot:hover { border-color:rgba(38,185,255,.5); background:rgba(38,185,255,.055); }
.item-slot.readonly, .spell-slot.readonly { cursor:default; }
.item-slot.readonly:hover, .spell-slot.readonly:hover { border-color:rgba(105,161,203,.27); background:rgba(255,255,255,.025); }
.item-slot img, .spell-slot img { width:100%; height:100%; object-fit:cover; }
.slot-plus { font-size:24px; color:#56758d; font-weight:200; }
.slot-index { position:absolute; left:5px; top:5px; min-width:17px; height:17px; padding:0 4px; border-radius:5px; display:grid; place-items:center; background:rgba(2,8,14,.76); color:#91a6b7; font-size:8px; }
.slot-remove { position:absolute; right:4px; top:4px; width:18px; height:18px; border-radius:50%; border:0; background:rgba(0,0,0,.7); color:#fff; display:none; place-items:center; cursor:pointer; font-size:11px; }
.item-slot:hover .slot-remove, .spell-slot:hover .slot-remove { display:grid; }

.rune-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.rune-tree-select { border:1px solid rgba(100,158,202,.17); border-radius:10px; background:rgba(4,15,25,.62); padding:10px; }
.rune-tree-select label { display:block; color:#6e879b; font-size:10px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:6px; }
.rune-tree-select select { width:100%; border:0; outline:0; background:transparent; color:#e4edf3; font-weight:700; font-size:13px; }
.rune-tree-select.static strong { display:block; color:#e4edf3; font-size:13px; }
.readonly-runes { grid-template-columns:repeat(auto-fit,minmax(42px,54px)); justify-content:start; }
.rune-button.readonly { cursor:default; }
.rune-lanes { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rune-lane { min-width:0; }
.rune-lane-title { font-size:11px; color:#8ba2b5; margin-bottom:8px; }
.rune-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.rune-button { position:relative; aspect-ratio:1; border-radius:50%; border:1px solid rgba(117,168,207,.12); background:rgba(2,10,18,.65); padding:7px; cursor:pointer; display:grid; place-items:center; }
.rune-button img { width:100%; height:100%; object-fit:contain; }
.rune-button:hover { border-color:rgba(38,185,255,.45); }
.rune-button.selected { border-color:rgba(225,180,75,.86); background:radial-gradient(circle,rgba(188,140,36,.24),transparent 70%); box-shadow:0 0 15px rgba(221,171,59,.12); }
.rune-button[title=""] { display:none; }

.spell-row { display:grid; grid-template-columns:1fr; gap:10px; }
.spell-slot { aspect-ratio:auto; width:100%; min-width:0; min-height:80px; height:auto; display:flex; align-items:center; justify-content:flex-start; gap:11px; padding:10px; text-align:left; overflow:hidden; }
.spell-slot img { width:56px; height:56px; border-radius:8px; flex:0 0 auto; }
.spell-copy { min-width:0; flex:1 1 auto; overflow:hidden; }
.spell-copy strong { font-size:14px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spell-copy span { font-size:11px; color:#8297a8; margin-top:4px; line-height:1.45; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; overflow-wrap:anywhere; }
.summoner-card .card-body { padding:12px 14px 14px; }

.ability-list { display:grid; gap:8px; }
.ability-mini { display:grid; grid-template-columns:48px 1fr; gap:10px; align-items:center; }
.ability-mini img { width:48px; height:48px; border-radius:8px; }
.ability-mini strong { font-size:13px; display:block; }
.ability-mini span { color:#8399aa; font-size:11px; display:block; margin-top:3px; line-height:1.45; }

.textarea { height:130px; padding:11px 12px; resize:vertical; line-height:1.5; }
.note-page-shell { min-height:132px; display:flex; }
.note-page-text { width:100%; min-height:132px; border:1px solid rgba(104,159,202,.12); border-radius:10px; background:rgba(3,12,21,.38); padding:13px 14px; color:#afc0cd; font-size:11px; line-height:1.65; white-space:pre-wrap; }
.note-textarea { min-height:132px; height:132px; margin:0; resize:vertical; }
.note-pagination { display:grid; grid-template-columns:32px 1fr 32px; align-items:center; gap:9px; margin-top:11px; }
.note-arrow, .note-dot { border:1px solid rgba(105,161,203,.16); background:rgba(255,255,255,.025); color:#8ba1b2; cursor:pointer; }
.note-arrow { width:32px; height:30px; border-radius:8px; font-size:18px; display:grid; place-items:center; }
.note-arrow:disabled { opacity:.28; cursor:default; }
.note-dots { display:flex; align-items:center; justify-content:center; gap:6px; }
.note-dot { min-width:25px; height:25px; padding:0 6px; border-radius:999px; font-size:9px; }
.note-dot.active { border-color:rgba(214,171,70,.56); color:#ffe9a8; background:rgba(169,119,24,.13); }
.save-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.saved-chip { color:var(--good); font-size:10px; display:flex; align-items:center; gap:6px; }

.modal-backdrop { position:fixed; z-index:100; inset:0; background:rgba(0,0,0,.66); display:grid; place-items:center; padding:20px; backdrop-filter:blur(5px); animation:fade .12s ease; }
@keyframes fade { from { opacity:0; } }
.picker-modal { width:min(760px,100%); max-height:min(720px,88vh); overflow:hidden; border-radius:16px; background:#07131f; border:1px solid rgba(96,161,210,.22); box-shadow:0 30px 90px rgba(0,0,0,.55); display:grid; grid-template-rows:auto auto 1fr; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:15px 16px; border-bottom:1px solid rgba(255,255,255,.06); }
.modal-head h3 { margin:0; font-size:14px; }
.icon-btn { width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); cursor:pointer; }
.modal-search { padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.05); }
.modal-grid { padding:14px 16px 18px; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:8px; align-content:start; }
.picker-option { min-height:58px; border:1px solid rgba(95,151,192,.12); border-radius:9px; background:rgba(255,255,255,.022); padding:7px; display:grid; grid-template-columns:44px 1fr; align-items:center; gap:9px; cursor:pointer; text-align:left; }
.picker-option:hover { border-color:rgba(38,185,255,.4); background:rgba(38,185,255,.055); }
.picker-option img { width:44px; height:44px; border-radius:7px; object-fit:contain; background:#040c14; }
.picker-option strong { font-size:10px; line-height:1.2; display:block; }
.picker-option span { display:block; font-size:8px; color:#6f8698; margin-top:3px; }

.saved-builds { display:grid; gap:10px; }
.saved-build { display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:10px; border:1px solid rgba(103,158,199,.15); border-radius:12px; background:rgba(8,20,32,.72); }
.saved-build img { width:56px; height:56px; border-radius:9px; object-fit:cover; }
.saved-build h3 { margin:0; font-size:13px; }
.saved-build p { margin:4px 0 0; color:#70889a; font-size:10px; }
.saved-build-actions { display:flex; gap:6px; }

#toast-root { position:fixed; z-index:200; right:18px; bottom:18px; display:grid; gap:8px; pointer-events:none; }
.toast { min-width:230px; max-width:360px; border:1px solid rgba(100,167,217,.24); border-radius:11px; background:rgba(5,15,25,.96); box-shadow:0 18px 45px rgba(0,0,0,.38); padding:11px 13px; color:#dce8f0; font-size:11px; animation:toastIn .2s ease; }
.toast.good { border-color:rgba(88,230,168,.33); }
.toast.warn { border-color:rgba(230,183,74,.35); }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } }

.error-screen { min-height:100vh; display:grid; place-items:center; padding:30px; text-align:center; background:linear-gradient(180deg,#071522,#030810); }
.error-card { width:min(560px,100%); padding:32px; border:1px solid rgba(255,105,126,.22); border-radius:17px; background:rgba(8,20,33,.88); }
.error-card h1 { margin:0 0 10px; }
.error-card p { color:#91a5b6; line-height:1.6; }
.error-card code { color:#f1d386; }

.legal { color:#516578; font-size:9px; line-height:1.5; text-align:center; max-width:850px; margin:42px auto 0; padding:0 18px; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .top-nav { justify-self:center; gap:22px; }
  .brand-lb { display:none; }
  .builder-grid { grid-template-columns:1fr; }
  .builder-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .builder-side .build-card:last-child { grid-column:1 / -1; }
  .builder-toolbar { grid-template-columns:1fr 1fr; }
  .builder-toolbar.view-toolbar { grid-template-columns:1fr 1fr; }
  .builder-toolbar.view-toolbar .build-display-name { grid-column:1 / -1; }
  .builder-toolbar .input { grid-column:1 / -1; }
  .builder-toolbar .btn { width:100%; }
  .starter-options { grid-template-columns:1fr; }
}

@media (max-width: 680px) {
  .site-header { height:66px; padding:0 13px; }
  .page, .champion-page { padding-top:66px; }
  .brand-mark { width:42px; height:48px; }
  .top-nav { gap:11px; }
  .nav-link { font-size:10px; letter-spacing:.06em; }
  .profile-button { width:36px; height:36px; }
  .landing-inner { min-height:calc(100vh - 66px); padding-top:42px; }
  .champion-group { gap:7px; padding-right:7px; }
  .champion-frame { width:52px; height:52px; }
  .champion-chip { width:52px; }
  .search-stage { width:calc(100vw - 24px); }
  .champion-search { height:58px; font-size:15px; }
  .content-page { padding:30px 14px 60px; }
  .page-heading { display:block; }
  .champion-hero { min-height:285px; }
  .champion-hero-content { width:calc(100% - 24px); gap:13px; padding-bottom:25px; }
  .hero-portrait { width:76px; height:76px; }
  .champion-title-block h1 { font-size:34px; }
  .champion-title-block p { font-size:11px; }
  .hero-actions { display:none; }
  .builder-wrap { width:calc(100% - 24px); }
  .builder-toolbar, .builder-toolbar.view-toolbar { grid-template-columns:1fr; }
  .builder-toolbar.view-toolbar .build-display-name { grid-column:auto; }
  .builder-toolbar .input { grid-column:auto; }
  .builder-side { grid-template-columns:1fr; }
  .builder-side .build-card:last-child { grid-column:auto; }
  .starter-options { grid-template-columns:1fr; }
  .slot-row { grid-template-columns:repeat(3,1fr); }
  .rune-lanes { grid-template-columns:1fr; }
  .rune-grid { grid-template-columns:repeat(6,1fr); }
  .spell-row { grid-template-columns:1fr; }
  .modal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .picker-option { grid-template-columns:38px 1fr; }
  .picker-option img { width:38px; height:38px; }
  .saved-build { grid-template-columns:48px 1fr; }
  .saved-build img { width:48px; height:48px; }
  .saved-build-actions { grid-column:1 / -1; }
}

/* R6 champion build browser, validation states, and richer hover UI */
.content-page { padding-top: 118px; }

.champion-build-picker {
  width:min(540px,72vw); min-height:54px; margin-top:2px; padding:9px 10px 9px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border:1px solid rgba(214,171,70,.34); border-radius:12px; cursor:pointer; text-align:left;
  background:linear-gradient(180deg,rgba(4,17,29,.82),rgba(2,11,20,.76)); color:#f5e7b5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.16);
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.champion-build-picker:hover { border-color:rgba(244,209,114,.68); background:linear-gradient(180deg,rgba(7,24,39,.9),rgba(4,15,26,.86)); transform:translateY(-1px); }
.champion-build-picker-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.champion-build-picker-copy strong { font-size:13px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.champion-build-picker-copy small { color:#91a9bc; font-size:10px; font-weight:650; letter-spacing:.02em; }
.champion-build-picker-arrow { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(106,168,214,.16); background:rgba(17,42,63,.5); color:#b6cee0; }
.champion-build-picker-arrow svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }

.build-browser-backdrop { padding:24px; }
.build-browser-modal {
  width:min(920px,96vw); height:min(720px,88vh); overflow:hidden; display:grid; grid-template-rows:auto auto 1fr auto;
  border-radius:20px; background:linear-gradient(180deg,#081827,#05101b); border:1px solid rgba(106,174,222,.24);
  box-shadow:0 38px 120px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.025);
}
.build-browser-head { padding:20px 22px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.055); }
.build-browser-head span { display:block; color:#d7b963; font-size:9px; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.build-browser-head h3 { margin:4px 0 0; font-size:25px; letter-spacing:-.025em; }
.build-browser-filters { padding:16px 22px; display:grid; grid-template-columns:repeat(2,minmax(0,220px)); gap:12px; border-bottom:1px solid rgba(255,255,255,.045); background:rgba(255,255,255,.012); }
.build-browser-filters label > span { display:block; margin:0 0 6px 2px; color:#7891a5; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.filter-select-wrap { position:relative; }
.filter-select-wrap select { width:100%; height:44px; appearance:none; border:1px solid rgba(101,164,208,.2); border-radius:10px; outline:none; padding:0 38px 0 12px; background:#0a1c2c; color:#edf4f8; font-size:12px; font-weight:750; cursor:pointer; }
.filter-select-wrap select:focus { border-color:rgba(38,185,255,.5); box-shadow:0 0 0 3px rgba(38,185,255,.06); }
.filter-select-wrap b { position:absolute; right:13px; top:50%; transform:translateY(-55%); pointer-events:none; color:#82a2ba; font-size:17px; font-weight:500; }
.build-browser-results { padding:16px 22px 20px; overflow:auto; display:grid; gap:10px; align-content:start; }
.build-browser-card { width:100%; min-height:92px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:13px 14px; border:1px solid rgba(103,158,199,.14); border-radius:13px; background:rgba(8,22,35,.72); cursor:pointer; text-align:left; transition:border-color .16s ease, background .16s ease, transform .16s ease; }
.build-browser-card:hover { border-color:rgba(42,181,242,.38); background:rgba(11,30,47,.9); transform:translateY(-1px); }
.build-browser-card.selected { border-color:rgba(221,177,70,.65); background:linear-gradient(90deg,rgba(160,116,30,.12),rgba(11,30,47,.9)); box-shadow:inset 0 0 0 1px rgba(250,220,136,.05); }
.build-browser-card-main { min-width:0; display:flex; align-items:center; gap:12px; }
.build-browser-check { width:20px; height:20px; border-radius:50%; flex:0 0 auto; border:1px solid rgba(114,166,204,.3); box-shadow:inset 0 0 0 4px #081725; }
.build-browser-card.selected .build-browser-check { background:#d7ad4c; border-color:#efd27d; }
.build-browser-card-main strong { display:block; font-size:13px; color:#edf3f7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.build-browser-card-main span { display:block; color:#7d96a9; font-size:10px; margin-top:5px; }
.build-browser-preview { display:flex; align-items:center; gap:14px; }
.build-preview-items, .build-preview-spells { display:flex; gap:4px; }
.build-browser-preview img { width:34px; height:34px; object-fit:cover; border-radius:7px; border:1px solid rgba(130,176,210,.14); background:#030b12; }
.build-preview-spells img { border-radius:50%; }
.build-browser-empty { padding:54px 20px; color:#7890a3; text-align:center; border:1px dashed rgba(113,166,205,.16); border-radius:13px; }
.build-browser-actions { min-height:76px; padding:14px 22px 18px; display:flex; align-items:center; justify-content:center; gap:10px; border-top:1px solid rgba(255,255,255,.055); background:rgba(2,9,15,.32); }
.build-browser-actions .btn { min-width:118px; }

.skill-cell.unavailable { opacity:.28; cursor:not-allowed; border-color:rgba(104,133,154,.11); background:rgba(255,255,255,.012); color:#536675; box-shadow:none; }
.skill-cell.unavailable:hover { border-color:rgba(160,125,66,.28); background:rgba(152,105,31,.045); }
.skill-cell.auto-skill { cursor:default; }
.skill-cell.auto-selected { border-color:rgba(38,185,255,.42); background:linear-gradient(145deg,rgba(22,107,151,.25),rgba(142,106,28,.2)); }
.auto-mark { font-size:6px; letter-spacing:.04em; color:#bcdff2; font-weight:850; }
.skill-fallback-icon { width:36px; height:36px; border-radius:7px; border:1px solid rgba(97,155,198,.22); background:radial-gradient(circle,#163c59,#07131e); flex:0 0 auto; }

.item-hover-tooltip { position:fixed; z-index:300; pointer-events:none; opacity:0; transform:translateY(5px) scale(.985); transition:opacity .12s ease, transform .12s ease; padding:13px; border-radius:13px; background:linear-gradient(180deg,rgba(8,22,36,.985),rgba(4,13,22,.99)); border:1px solid rgba(215,172,70,.34); box-shadow:0 22px 55px rgba(0,0,0,.55); color:#e8f0f5; }
.item-hover-tooltip.visible { opacity:1; transform:translateY(0) scale(1); }
.item-tooltip-head { display:grid; grid-template-columns:52px 1fr; gap:11px; align-items:center; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.065); }
.item-tooltip-head img { width:52px; height:52px; object-fit:cover; border-radius:9px; border:1px solid rgba(111,167,208,.18); }
.item-tooltip-head strong { display:block; font-size:14px; line-height:1.25; }
.item-tooltip-head span { display:block; margin-top:4px; color:#e1bd62; font-size:11px; font-weight:800; }
.item-tooltip-description { padding-top:10px; color:#aabcca; font-size:12px; line-height:1.55; overflow-wrap:anywhere; }

.rune-tree-select { padding:12px; border-color:rgba(104,164,209,.22); background:linear-gradient(180deg,rgba(8,24,38,.82),rgba(4,15,25,.72)); }
.rune-tree-select label { margin-bottom:8px; color:#8ca6ba; font-size:9px; font-weight:850; }
.rune-select-wrap { position:relative; }
.rune-tree-select select { height:42px; appearance:none; border:1px solid rgba(102,164,209,.18); border-radius:9px; padding:0 38px 0 11px; background:#091b2a; color:#f0f5f8; font-size:13px; font-weight:800; cursor:pointer; }
.rune-tree-select select:focus { border-color:rgba(38,185,255,.55); box-shadow:0 0 0 3px rgba(38,185,255,.055); }
.rune-tree-select select option { background:#071521; color:#e9f0f5; }
.rune-select-arrow { position:absolute; right:12px; top:50%; transform:translateY(-55%); pointer-events:none; color:#8baac0; font-size:18px; }
.rune-tree-select.static strong { font-size:14px; color:#f0f5f8; }

.note-pagination { grid-template-columns:38px 1fr 38px; gap:12px; }
.note-arrow { width:38px; height:34px; border-radius:9px; border-color:rgba(184,145,60,.25); background:linear-gradient(180deg,rgba(25,44,59,.72),rgba(7,19,30,.8)); color:#dcc275; box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.note-arrow:hover:not(:disabled) { border-color:rgba(226,188,91,.5); background:linear-gradient(180deg,rgba(33,56,73,.82),rgba(9,24,38,.9)); }
.note-arrow svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.65; }
.note-dot { width:18px; min-width:18px; height:18px; padding:0; border:0; background:transparent; display:grid; place-items:center; }
.note-dot span { width:7px; height:7px; display:block; transform:rotate(45deg); border:1px solid rgba(114,166,204,.38); background:rgba(18,44,64,.55); transition:transform .15s ease, border-color .15s ease, background .15s ease; }
.note-dot:hover span { border-color:rgba(218,174,70,.5); }
.note-dot.active { border:0; background:transparent; }
.note-dot.active span { transform:rotate(45deg) scale(1.25); border-color:#e3bd62; background:#9e7425; box-shadow:0 0 10px rgba(213,169,59,.18); }

@media (max-width:680px) {
  .content-page { padding-top:96px; }
  .champion-build-picker { width:min(100%,72vw); min-height:50px; }
  .champion-build-picker-copy strong { font-size:11px; }
  .build-browser-backdrop { padding:10px; }
  .build-browser-modal { width:100%; height:min(760px,94vh); border-radius:16px; }
  .build-browser-filters { grid-template-columns:1fr 1fr; padding:12px 14px; }
  .build-browser-results { padding:12px 14px; }
  .build-browser-card { grid-template-columns:1fr; gap:10px; }
  .build-browser-preview { padding-left:32px; justify-content:space-between; }
  .build-browser-preview img { width:30px; height:30px; }
}

/* R7 rune-page redesign, profile menu, banner framing and item description polish */
.profile-menu {
  top: 58px;
  width: 390px;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(5,17,29,.99), rgba(3,11,20,.99));
  border-color: rgba(138,190,229,.22);
  box-shadow: 0 30px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.035);
}
.profile-menu button {
  min-height: 66px;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14px;
}
.profile-menu button > span:last-child { min-width: 0; display:flex; flex-direction:column; gap:4px; }
.profile-menu button strong { display:block; color:#eef5f9; font-size:14px; line-height:1.1; }
.profile-menu button small { display:block; color:#728a9e; font-size:10px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-menu-icon {
  width: 44px; height: 44px; flex:0 0 44px; display:grid; place-items:center;
  border-radius: 11px; color:#9fcae5;
  border:1px solid rgba(112,173,218,.18);
  background:linear-gradient(180deg,rgba(20,48,70,.68),rgba(7,22,35,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.profile-menu-icon svg { width:24px; height:24px; }
.profile-menu button:hover .profile-menu-icon { color:#e7d18a; border-color:rgba(217,173,70,.35); background:linear-gradient(180deg,rgba(43,55,61,.78),rgba(21,31,34,.82)); }
.profile-menu .danger strong, .profile-menu .danger .profile-menu-icon { color:#e697a3; }

.profile-menu button[data-profile-action="profile"] .profile-menu-icon { color:#f0cf72; background:linear-gradient(145deg,rgba(91,69,28,.42),rgba(15,39,54,.76)); }
.profile-menu button[data-profile-action="my-builds"] .profile-menu-icon { color:#75c8f3; background:linear-gradient(145deg,rgba(16,69,96,.4),rgba(11,30,46,.8)); }
.profile-menu button[data-profile-action="upload"] .profile-menu-icon { color:#83ddb5; background:linear-gradient(145deg,rgba(18,87,69,.36),rgba(10,34,38,.8)); }
.profile-menu button[data-profile-action="sign-out"] .profile-menu-icon { background:linear-gradient(145deg,rgba(91,31,42,.34),rgba(38,17,23,.78)); }
.profile-menu button[data-profile-action="profile"] { border-bottom:1px solid rgba(255,255,255,.045); margin-bottom:4px; }

.profile-menu hr { margin:9px 5px; }

.champion-page { padding-top: 76px; }
.champion-hero { min-height: 350px; }
.champion-hero-bg {
  inset: 0;
  transform: none;
  background-position: center 16%;
  background-size: cover;
}
.champion-hero-content { padding-top: 104px; }

.item-hover-tooltip { max-width: 390px; padding: 14px; }
.item-tooltip-description { font-size: 12.5px; line-height: 1.58; }
.item-tooltip-description .item-desc-block { margin: 0; color:#aebfcb; }
.item-tooltip-description .item-desc-block + .item-desc-block { margin-top: 9px; padding-top: 9px; border-top:1px solid rgba(255,255,255,.045); }
.item-tooltip-description .item-desc-block strong { color:#e5c76f; font-weight:850; }
.item-tooltip-description .item-desc-stats { color:#c8d7e1; font-weight:650; }

.rune-card-body { padding: 0; }
.rune-editor-layout {
  display:grid;
  grid-template-columns:minmax(0,1.18fr) 22px minmax(0,.92fr);
  gap:0;
  min-height:560px;
  background:
    radial-gradient(circle at 18% 18%, rgba(41,130,177,.08), transparent 34%),
    linear-gradient(180deg,rgba(4,14,24,.82),rgba(2,9,16,.92));
}
.rune-editor-divider { display:grid; place-items:center; }
.rune-editor-divider span { width:1px; height:86%; background:linear-gradient(180deg,transparent,rgba(194,158,72,.32) 16%,rgba(92,151,190,.22) 84%,transparent); }
.rune-tree-editor { position:relative; padding:18px 18px 22px; min-width:0; }
.rune-tree-editor::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.08;
  background:radial-gradient(circle at 50% 18%, var(--rune-accent), transparent 36%);
}
.rune-path-summary {
  position:relative; z-index:1; width:100%; min-height:82px; display:grid;
  grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:13px;
  padding:9px 12px; border-radius:14px; text-align:left;
  border:1px solid color-mix(in srgb, var(--rune-accent) 36%, transparent);
  background:linear-gradient(180deg,rgba(11,27,42,.9),rgba(5,16,27,.86)); color:#edf4f8;
}
button.rune-path-summary { cursor:pointer; }
button.rune-path-summary:hover { border-color:color-mix(in srgb, var(--rune-accent) 72%, white 8%); box-shadow:0 0 22px color-mix(in srgb, var(--rune-accent) 11%, transparent); }
.rune-path-crest {
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--rune-accent) 58%, transparent);
  background:radial-gradient(circle, color-mix(in srgb, var(--rune-accent) 18%, transparent), rgba(2,9,15,.8) 68%);
  box-shadow:0 0 18px color-mix(in srgb, var(--rune-accent) 12%, transparent);
}
.rune-path-crest img { width:38px; height:38px; object-fit:contain; }
.rune-path-copy { min-width:0; display:flex; flex-direction:column; }
.rune-path-copy small { color:#71899d; font-size:8px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.rune-path-copy strong { margin-top:2px; font-family:Georgia,serif; color:color-mix(in srgb,var(--rune-accent) 74%, #f3ead3 26%); font-size:17px; letter-spacing:.08em; text-transform:uppercase; }
.rune-path-copy em { margin-top:3px; color:#9cb0be; font-size:10px; font-style:normal; }
.rune-change { color:#8ca8ba; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }

.rune-tree-rail { position:relative; z-index:1; margin:16px 0 0 29px; border-left:2px solid color-mix(in srgb,var(--rune-accent) 52%, #6f8290 18%); }
.rune-option-row { position:relative; min-height:104px; display:flex; align-items:center; padding-left:24px; }
.rune-option-row + .rune-option-row { border-top:1px solid rgba(255,255,255,.035); }
.rune-row-node {
  position:absolute; left:-9px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  border:2px solid color-mix(in srgb,var(--rune-accent) 72%, #d7c47d 15%);
  background:#07131e; box-shadow:0 0 0 4px rgba(2,9,15,.82), 0 0 16px color-mix(in srgb,var(--rune-accent) 16%, transparent);
}
.rune-row-content { min-width:0; width:100%; }
.rune-row-content > small { display:block; margin-bottom:8px; color:#627b8f; font-size:8px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.rune-row-options { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.rune-choice {
  width:58px; min-height:72px; padding:6px 4px 4px; border:1px solid transparent; border-radius:11px;
  background:transparent; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; color:#8095a5;
  transition:transform .15s ease, border-color .15s ease, background .15s ease, filter .15s ease;
}
.rune-choice img {
  width:46px; height:46px; object-fit:contain; border-radius:50%; filter:grayscale(.85) brightness(.7);
  transition:filter .15s ease, transform .15s ease;
}
.rune-choice span { width:100%; font-size:7px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.rune-choice:hover { transform:translateY(-2px); color:#cbd8e0; border-color:color-mix(in srgb,var(--rune-accent) 25%, transparent); background:rgba(255,255,255,.018); }
.rune-choice:hover img { filter:grayscale(.25) brightness(1); }
.rune-choice.selected { color:#eef4f7; border-color:color-mix(in srgb,var(--rune-accent) 48%, transparent); background:radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--rune-accent) 16%, transparent),rgba(255,255,255,.015) 62%); }
.rune-choice.selected img { filter:drop-shadow(0 0 12px color-mix(in srgb,var(--rune-accent) 34%, transparent)); transform:scale(1.07); }
.rune-choice.readonly { width:auto; min-width:0; min-height:0; padding:0; border:0; background:transparent; cursor:default; align-items:flex-start; flex-direction:row; gap:9px; }
.rune-choice.readonly img { width:42px; height:42px; flex:0 0 42px; filter:none; }
.rune-choice.readonly span { width:auto; max-width:130px; color:#cbd8e1; font-size:10px; line-height:1.3; white-space:normal; text-align:left; }
.rune-secondary-note { margin:10px 4px 0 54px; color:#657e92; font-size:9px; line-height:1.45; }

.rune-display-layout { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:16px; }
.rune-display-tree {
  padding:13px; border:1px solid rgba(108,164,206,.13); border-radius:14px;
  background:linear-gradient(180deg,rgba(7,20,33,.75),rgba(3,12,21,.7));
}
.rune-display-tree .rune-path-summary { min-height:70px; grid-template-columns:52px minmax(0,1fr); padding:7px 9px; border:0; background:transparent; box-shadow:none; }
.rune-display-tree .rune-path-crest { width:48px; height:48px; }
.rune-display-tree .rune-path-crest img { width:33px; height:33px; }
.rune-display-tree .rune-path-copy strong { font-size:14px; }
.rune-display-tree .rune-path-copy em { font-size:9px; }
.rune-display-picks { margin-top:8px; padding-top:11px; border-top:1px solid rgba(255,255,255,.05); display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.rune-empty { grid-column:1/-1; color:#647d90; font-size:10px; padding:8px 0; }

.rune-path-backdrop { padding:24px; }
.rune-path-modal {
  width:min(1180px,96vw); max-height:90vh; overflow:auto; border-radius:20px;
  background:linear-gradient(180deg,#06131f,#030b13); border:1px solid rgba(196,158,68,.26);
  box-shadow:0 38px 120px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.035);
}
.rune-path-modal-head { padding:20px 22px 16px; display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.055); }
.rune-path-modal-head span { color:#d4b65d; font-size:9px; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.rune-path-modal-head h3 { margin:4px 0 0; font-size:25px; }
.rune-path-modal-head p { margin:5px 0 0; color:#71899d; font-size:11px; }
.rune-path-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); min-height:500px; }
.rune-path-card {
  position:relative; overflow:hidden; min-width:0; padding:34px 18px 26px; border:0; border-right:1px solid rgba(255,255,255,.045);
  background:#030c14; color:#788b99; cursor:pointer; display:flex; flex-direction:column; align-items:center; text-align:center;
  transition:background .2s ease, color .2s ease, filter .2s ease;
}
.rune-path-card:last-child { border-right:0; }
.rune-path-card-glow { position:absolute; inset:0; opacity:0; background:linear-gradient(180deg,color-mix(in srgb,var(--rune-accent) 18%, transparent),transparent 58%); transition:opacity .2s ease; }
.rune-path-card:hover:not(:disabled), .rune-path-card.selected { background:linear-gradient(180deg,color-mix(in srgb,var(--rune-accent) 8%, #030c14),#030c14 70%); color:#eef4f7; }
.rune-path-card:hover:not(:disabled) .rune-path-card-glow, .rune-path-card.selected .rune-path-card-glow { opacity:1; }
.rune-path-card:disabled { opacity:.24; cursor:not-allowed; }
.rune-path-big-icon {
  position:relative; width:108px; height:108px; display:grid; place-items:center; border-radius:50%; z-index:1;
  border:2px solid color-mix(in srgb,var(--rune-accent) 54%, #74674b 28%); background:rgba(2,9,15,.86);
  box-shadow:0 0 0 7px rgba(0,0,0,.22), 0 0 26px color-mix(in srgb,var(--rune-accent) 0%, transparent);
  transition:box-shadow .2s ease, transform .2s ease;
}
.rune-path-card:hover:not(:disabled) .rune-path-big-icon, .rune-path-card.selected .rune-path-big-icon { transform:translateY(-3px); box-shadow:0 0 0 7px rgba(0,0,0,.18),0 0 35px color-mix(in srgb,var(--rune-accent) 34%, transparent); }
.rune-path-big-icon img { width:70px; height:70px; object-fit:contain; opacity:.72; filter:grayscale(.55); }
.rune-path-card:hover:not(:disabled) .rune-path-big-icon img, .rune-path-card.selected .rune-path-big-icon img { opacity:1; filter:none; }
.rune-path-card > strong { position:relative; z-index:1; margin-top:22px; color:inherit; font-family:Georgia,serif; font-size:20px; letter-spacing:.13em; text-transform:uppercase; }
.rune-path-card > small { position:relative; z-index:1; margin-top:7px; min-height:32px; color:#84949f; font-size:9px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.rune-path-samples { position:relative; z-index:1; margin-top:32px; min-height:116px; display:grid; grid-template-columns:repeat(2,54px); align-content:start; justify-content:center; gap:7px; }
.rune-path-samples img { width:54px; height:54px; object-fit:contain; filter:grayscale(.9) brightness(.68); transition:filter .2s ease, transform .2s ease; }
.rune-path-card:hover:not(:disabled) .rune-path-samples img, .rune-path-card.selected .rune-path-samples img { filter:none; transform:scale(1.04); }
.rune-path-card > em { position:relative; z-index:1; margin-top:auto; color:#778a98; font-size:10px; line-height:1.4; font-style:normal; max-width:170px; }
.rune-path-card:hover:not(:disabled) > em, .rune-path-card.selected > em { color:#cbd5db; }
.rune-path-modal-foot { min-height:66px; display:flex; justify-content:center; align-items:center; border-top:1px solid rgba(255,255,255,.05); }

@media (max-width: 980px) {
  .profile-menu { width:min(390px,calc(100vw - 24px)); }
  .rune-editor-layout { grid-template-columns:1fr; }
  .rune-editor-divider { display:none; }
  .rune-tree-editor + .rune-tree-editor { border-top:1px solid rgba(255,255,255,.055); }
  .rune-display-layout { grid-template-columns:1fr; }
  .rune-path-grid { grid-template-columns:repeat(2,1fr); }
  .rune-path-card { min-height:380px; border-bottom:1px solid rgba(255,255,255,.045); }
}
@media (max-width: 620px) {
  .profile-menu { right:-6px; width:min(360px,calc(100vw - 16px)); }
  .profile-menu button { min-height:60px; }
  .profile-menu-icon { width:40px; height:40px; flex-basis:40px; }
  .champion-hero { min-height:335px; }
  .champion-hero-bg { background-position:center 12%; }
  .rune-tree-editor { padding:14px 10px 18px; }
  .rune-path-summary { grid-template-columns:52px 1fr auto; }
  .rune-path-crest { width:48px; height:48px; }
  .rune-tree-rail { margin-left:24px; }
  .rune-choice { width:52px; min-height:66px; }
  .rune-choice img { width:42px; height:42px; }
  .rune-path-backdrop { padding:8px; }
  .rune-path-modal { width:100%; max-height:94vh; }
  .rune-path-grid { grid-template-columns:1fr; }
  .rune-path-card { min-height:280px; padding:24px 16px 20px; }
  .rune-path-samples { margin-top:18px; min-height:54px; grid-template-columns:repeat(4,46px); }
  .rune-path-samples img { width:46px; height:46px; }
  .rune-path-big-icon { width:86px; height:86px; }
  .rune-path-big-icon img { width:56px; height:56px; }
}

/* R8 champion-view layout, build variants, rune shards and community discussion */
.view-mode .skill-cell.readonly {
  opacity: 1;
  border-color: rgba(112,165,204,.16);
  background: linear-gradient(180deg,rgba(14,31,45,.72),rgba(7,20,31,.78));
  color:#72899a;
}
.view-mode .skill-cell.readonly:hover {
  border-color: rgba(112,165,204,.16);
  background: linear-gradient(180deg,rgba(14,31,45,.72),rgba(7,20,31,.78));
}
.view-mode .skill-cell.readonly.selected,
.view-mode .skill-cell.readonly.selected:hover {
  opacity:1;
  border-color:rgba(218,174,70,.72);
  background:linear-gradient(145deg,rgba(190,136,29,.48),rgba(19,95,132,.44));
  color:#fff4d4;
}

.view-upper-grid {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(310px,.72fr);
  gap:16px;
  align-items:start;
}
.view-upper-main,
.view-upper-side { display:grid; gap:16px; min-width:0; }
.view-equal-row {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(310px,.72fr);
  gap:16px;
  align-items:stretch;
  margin-top:16px;
  margin-bottom:16px;
}
.view-equal-row > .build-card { height:100%; }
.view-equal-row .notes-card { display:flex; flex-direction:column; }
.view-equal-row .notes-card .card-body { flex:1; display:flex; flex-direction:column; }
.view-equal-row .note-page-shell { flex:1; }
.view-equal-row .note-page-text { min-height:210px; }

.item-variants { display:grid; gap:10px; }
.item-variant {
  padding:10px 11px;
  border:1px solid rgba(105,161,203,.12);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(5,17,28,.66),rgba(2,10,18,.5));
}
.item-variant-head { min-height:30px; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.item-variant-head strong { color:#eef3f6; font-size:13px; }
.item-variant-head > span { color:#687f91; font-size:8px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.item-variant-label {
  min-width:0; flex:1; height:34px; border:1px solid rgba(104,159,202,.17); border-radius:8px;
  padding:0 10px; outline:0; background:rgba(8,20,33,.82); color:#edf3f6; font-size:12px; font-weight:800;
}
.item-variant-label:focus { border-color:rgba(38,185,255,.48); box-shadow:0 0 0 3px rgba(38,185,255,.05); }
.full-item-card .slot-row { grid-template-columns:repeat(6,64px); justify-content:start; gap:8px; }
.full-item-card .item-slot { width:64px; height:64px; aspect-ratio:auto; border-radius:10px; }
.full-item-card .item-slot img { image-rendering:auto; }
.view-equal-row .full-item-card .card-body { height:calc(100% - 58px); display:flex; flex-direction:column; justify-content:space-evenly; }
.view-equal-row .full-item-card .item-variants { flex:1; align-content:space-between; }

.hero-engagement-shortcuts { margin-left:auto; display:flex; align-items:center; gap:10px; }
.hero-engagement {
  height:42px; min-width:64px; padding:0 12px; border-radius:11px; border:1px solid rgba(107,162,201,.2);
  background:rgba(3,13,23,.56); color:#c4d3dd; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025); transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.hero-engagement:hover { border-color:rgba(214,171,70,.46); background:rgba(27,30,29,.74); transform:translateY(-1px); }
.hero-engagement svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.65; }
.hero-engagement .heart { font-size:24px; line-height:1; color:#e19a9f; }
.hero-engagement strong { font-size:11px; }

.rune-display-layout {
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.05fr) minmax(250px,.72fr);
  gap:16px;
  padding:18px;
  align-items:stretch;
}
.rune-display-tree { min-height:230px; }
.rune-display-picks { grid-template-columns:repeat(2,minmax(0,1fr)); }
.rune-choice.readonly { padding:7px 8px; border:1px solid rgba(107,162,201,.08); border-radius:10px; background:rgba(255,255,255,.012); align-items:center; }
.rune-choice.readonly:hover { transform:none; border-color:rgba(215,174,70,.26); background:rgba(213,166,56,.035); }
.rune-choice.readonly img { width:48px; height:48px; flex:0 0 48px; }
.rune-choice.readonly span { font-size:11px; max-width:none; }

.rune-stat-panel {
  margin-top:14px; padding:13px; border:1px solid rgba(199,164,82,.17); border-radius:13px;
  background:linear-gradient(180deg,rgba(9,20,29,.82),rgba(4,13,21,.76));
  position:relative; z-index:1;
}
.rune-display-layout > .rune-stat-panel { margin-top:0; min-height:230px; display:flex; flex-direction:column; justify-content:center; }
.rune-stat-heading { display:flex; flex-direction:column; gap:3px; margin-bottom:10px; }
.rune-stat-heading strong { color:#e8d79e; font-family:Georgia,serif; font-size:14px; letter-spacing:.04em; }
.rune-stat-heading span { color:#70889a; font-size:9px; }
.rune-stat-rows { display:grid; gap:8px; }
.rune-stat-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.rune-stat-choice {
  min-width:0; min-height:58px; border:1px solid rgba(108,160,197,.1); border-radius:9px; background:rgba(2,10,17,.44);
  color:#73899a; padding:6px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
button.rune-stat-choice { cursor:pointer; }
.rune-stat-choice img { width:28px; height:28px; object-fit:contain; opacity:.45; filter:grayscale(.8); }
.rune-stat-choice span { display:none; }
.rune-stat-choice.selected { border-color:rgba(220,181,79,.55); background:radial-gradient(circle,rgba(198,151,42,.12),rgba(2,10,17,.5) 70%); color:#f1e2b0; }
.rune-stat-choice.selected img { opacity:1; filter:none; drop-shadow:0 0 8px rgba(220,181,79,.2); }
button.rune-stat-choice:hover { border-color:rgba(43,183,244,.32); }

.rune-hover-tooltip {
  position:fixed; z-index:305; pointer-events:none; opacity:0; transform:translateY(5px) scale(.985); transition:opacity .12s ease,transform .12s ease;
  padding:13px 14px; border-radius:13px; background:linear-gradient(180deg,rgba(8,21,34,.99),rgba(3,12,20,.99));
  border:1px solid rgba(210,174,76,.3); box-shadow:0 22px 58px rgba(0,0,0,.58); color:#e9f0f4;
}
.rune-hover-tooltip.visible { opacity:1; transform:translateY(0) scale(1); }
.rune-tooltip-head { display:flex; align-items:center; gap:10px; padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.055); }
.rune-tooltip-head img { width:44px; height:44px; object-fit:contain; border-radius:50%; background:rgba(255,255,255,.02); }
.rune-tooltip-head strong { font-size:13px; }
.rune-hover-tooltip p { margin:9px 0 0; color:#aebfca; font-size:11.5px; line-height:1.55; }

.community-card { margin-top:16px; scroll-margin-top:92px; }
.community-head { min-height:82px; padding:17px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid rgba(255,255,255,.055); }
.community-kicker { color:#d7b85d; font-size:8px; font-weight:900; text-transform:uppercase; letter-spacing:.16em; }
.community-head h2 { margin:4px 0 0; font-size:20px; }
.community-upload { flex:0 0 auto; }
.community-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.05); }
.community-stat {
  min-height:72px; border:1px solid rgba(104,159,201,.12); border-radius:12px; background:rgba(4,15,25,.5); color:#cddae2;
  display:grid; grid-template-columns:38px auto 1fr; align-items:center; gap:8px; padding:10px 12px; text-align:left;
}
button.community-stat { cursor:pointer; }
button.community-stat:hover { border-color:rgba(214,171,70,.35); background:rgba(23,26,26,.62); }
.community-stat.liked { border-color:rgba(220,116,130,.4); background:rgba(92,31,41,.15); }
.community-stat-icon { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(10,31,47,.72); color:#8fbcd8; }
.community-stat-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; }
.community-stat-icon.heart { color:#e18f9b; font-size:26px; }
.community-stat strong { font-size:17px; }
.community-stat small { color:#6e8496; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.comment-compose { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; align-items:start; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.05); }
.comment-avatar { width:38px; height:38px; flex:0 0 38px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(109,166,207,.22); background:linear-gradient(145deg,#16334b,#091925); color:#b9d6e8; font-size:11px; font-weight:850; }
.comment-avatar.current { border-color:rgba(214,171,70,.4); color:#efd88c; background:linear-gradient(145deg,#46391f,#121b24); }
.comment-compose textarea { width:100%; min-height:72px; resize:vertical; border:1px solid rgba(104,159,201,.14); border-radius:11px; background:rgba(3,12,21,.58); color:#e6eef3; padding:11px 12px; outline:0; font:inherit; font-size:11.5px; line-height:1.5; }
.comment-compose textarea:focus { border-color:rgba(38,185,255,.42); box-shadow:0 0 0 3px rgba(38,185,255,.05); }
.comment-list { display:grid; }
.comment-row { display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; padding:15px 18px; border-bottom:1px solid rgba(255,255,255,.042); }
.comment-row:last-child { border-bottom:0; }
.comment-row.new-comment { background:rgba(213,171,64,.025); }
.comment-meta { display:flex; align-items:center; gap:8px; }
.comment-meta strong { font-size:11.5px; color:#e7eef2; }
.comment-meta span { color:#5f7587; font-size:9px; }
.comment-body p { margin:6px 0 8px; color:#aebfca; font-size:11.5px; line-height:1.55; }
.comment-actions { display:flex; gap:13px; }
.comment-actions button { padding:0; border:0; background:none; color:#71889a; cursor:pointer; font-size:9.5px; }
.comment-actions button:hover { color:#d8bd6c; }

@media (max-width: 1040px) {
  .view-upper-grid, .view-equal-row { grid-template-columns:1fr; }
  .rune-display-layout { grid-template-columns:1fr 1fr; }
  .rune-display-layout > .rune-stat-panel { grid-column:1 / -1; }
  .rune-stat-row { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 680px) {
  .hero-engagement-shortcuts { margin-left:0; align-self:flex-end; }
  .hero-engagement { min-width:54px; padding:0 9px; }
  .full-item-card .slot-row { grid-template-columns:repeat(3,64px); justify-content:start; }
  .rune-display-layout { grid-template-columns:1fr; }
  .rune-display-layout > .rune-stat-panel { grid-column:auto; }
  .community-head { align-items:flex-start; flex-direction:column; }
  .community-upload { width:100%; }
  .community-stats { grid-template-columns:1fr; }
  .comment-compose { grid-template-columns:38px minmax(0,1fr); }
  .comment-compose .btn { grid-column:2; justify-self:end; }
}


/* R9 Champions discovery + News */
.champions-index-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  background: #06111c;
}
.champions-index-page::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 76px 0 0;
  background-image:
    linear-gradient(180deg, rgba(4,15,25,.34), rgba(3,12,21,.62) 62%, rgba(3,10,17,.86)),
    url('/assets/summoners-rift-blur.png');
  background-size: cover;
  background-position: center 42%;
  filter: saturate(.78) brightness(.76) blur(1.2px);
  transform: scale(1.012);
}
.champions-index-page::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 76px 0 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,9,16,.3), rgba(4,17,29,.04) 45%, rgba(2,9,16,.28)),
    radial-gradient(circle at 50% 8%, rgba(14,76,118,.17), transparent 42%);
}
.champions-index-page .champions-page-shell { position: relative; z-index: 1; }
.champions-heading { align-items: center; margin-bottom: 28px; }
.champions-heading-copy h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 4.2vw, 62px);
  line-height: .98;
  letter-spacing: -.045em;
  color: #f2ead8;
  text-shadow: 0 3px 24px rgba(0,0,0,.34);
}
.champions-heading-copy p {
  max-width: 620px;
  margin-top: 10px;
  color: #c0d2e0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.45;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.champion-browse-toggle {
  width: min(390px, 42vw);
  height: 52px;
  padding: 2px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(68,139,188,.34);
  border-radius: 999px;
  background: rgba(4,18,31,.88);
  box-shadow: 0 13px 34px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.025);
  overflow: hidden;
}
.champion-browse-option {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #a9bed0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.champion-browse-option svg { width: 19px; height: 19px; }
.champion-browse-option:hover { color: #edf5fb; background: rgba(255,255,255,.025); }
.champion-browse-option.active {
  color: #fff5d5;
  background: linear-gradient(180deg, rgba(72,59,31,.56), rgba(38,32,21,.56));
  box-shadow: inset 0 0 0 1px rgba(234,183,64,.95), 0 0 18px rgba(217,164,53,.07);
}
.champion-browse-option.active svg { color: #f2bf43; fill: rgba(242,191,67,.18); }
.champions-index-page .champion-grid-card {
  background: rgba(4,16,27,.82);
  box-shadow: 0 7px 22px rgba(0,0,0,.12);
}
.champions-index-page .champion-grid-card:hover { background: rgba(7,24,39,.92); }
.champions-index-page .legal { color: rgba(166,187,205,.58); }

.news-page {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 72% 10%, rgba(19,107,163,.13), transparent 34%),
    linear-gradient(180deg,#07131f,#030911 82%);
}
.news-shell { max-width: 980px; }
.news-heading h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(40px,5vw,58px); color:#f1eadb; }
.news-heading p { color:#8fa8bd; font-size:14px; }
.news-feed { display:grid; gap:16px; }
.news-entry {
  border: 1px solid rgba(111,163,205,.17);
  border-radius: 18px;
  padding: clamp(24px,4vw,42px);
  background: linear-gradient(145deg, rgba(9,24,39,.9), rgba(5,15,26,.9));
  box-shadow: 0 24px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025);
}
.news-entry-meta { display:flex; align-items:center; gap:10px; margin-bottom:13px; color:#8199ac; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.13em; }
.news-entry-meta span { padding:4px 7px; border:1px solid rgba(216,165,58,.28); border-radius:999px; color:#e7c66e; background:rgba(216,165,58,.07); }
.news-entry h2 { margin:0 0 16px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(27px,4vw,40px); color:#f5eedf; letter-spacing:-.025em; }
.news-entry p { max-width:780px; margin:0 0 14px; color:#b3c4d2; font-size:15px; line-height:1.78; }
.news-entry p:last-child { margin-bottom:0; }

@media (max-width: 820px) {
  .champions-heading { align-items:flex-start; gap:18px; }
  .champion-browse-toggle { width:min(100%,390px); }
}
@media (max-width: 680px) {
  .champions-index-page::before, .champions-index-page::after { top:66px; }
  .champions-heading { display:flex; flex-direction:column; }
  .champion-browse-toggle { width:100%; height:48px; }
  .champion-browse-option { font-size:11px; }
}

/* R10 page backgrounds, stable header/footer, profile hub */
html { scrollbar-gutter: stable; }
body { overflow-y: scroll; }

/* Keep legal text at the visual bottom on short pages while remaining after content on long pages. */
.content-page .page-shell {
  min-height: calc(100vh - 198px);
  display: flex;
  flex-direction: column;
}
.content-page .page-shell > .legal { margin-top: auto; padding-top: 44px; }
.builder-wrap { min-height: calc(100vh - 401px); display:flex; flex-direction:column; }
.builder-wrap > .legal { margin-top:auto; padding-top:44px; }
.landing-legal {
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:14px;
  pointer-events:none;
}
.landing-legal .legal { margin:0 auto; color:rgba(159,180,198,.48); }

/* Champions uses the single-lane Howling Abyss rather than the Summoner's Rift home art. */
.champions-index-page::before {
  background-image:
    linear-gradient(180deg, rgba(3,13,23,.38), rgba(3,12,21,.7) 62%, rgba(3,10,17,.92)),
    url('https://prod.assets.earlygamecdn.com/images/ARAM-Mayhem-League.png?transform=Banner+Webp'),
    url('/assets/summoners-rift-blur.png');
  background-size: cover, cover, cover;
  background-position: center 42%, center 50%, center;
  filter: saturate(.48) brightness(.61) contrast(1.04) blur(2.8px);
  transform: scale(1.04);
}
.champions-index-page::after {
  background:
    linear-gradient(90deg, rgba(2,13,22,.42), rgba(7,31,47,.05) 46%, rgba(2,12,21,.4)),
    linear-gradient(180deg, rgba(10,52,78,.12), rgba(3,10,17,.48)),
    radial-gradient(circle at 50% 12%, rgba(56,159,211,.16), transparent 46%);
}

/* Legacy News background block; overridden below by the R12 Nexus destruction backdrop. */
.news-page {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#040b13;
}
.news-page::before {
  content:"";
  position:fixed;
  z-index:-2;
  inset:76px 0 0;
  background-image:
    linear-gradient(180deg, rgba(5,10,18,.48), rgba(4,9,16,.72) 58%, rgba(3,8,14,.9)),
    url('https://images1.wikia.nocookie.net/__cb20130426195249/leagueoflegends/images/c/c1/TTmap.jpg'),
    url('/assets/summoners-rift-blur.png');
  background-size:cover, cover, cover;
  background-position:center, center 44%, center;
  filter:saturate(.7) brightness(.67) blur(3px);
  transform:scale(1.035);
}
.news-page::after {
  content:"";
  position:fixed;
  z-index:-1;
  inset:76px 0 0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,8,14,.42),rgba(9,16,27,.08) 50%,rgba(2,8,14,.46)),
    radial-gradient(circle at 54% 20%,rgba(76,50,116,.16),transparent 38%);
}
.news-shell { max-width:980px; }
.news-heading { margin-bottom:0; }
.news-divider {
  height:1px;
  margin:20px 0 24px;
  background:linear-gradient(90deg,rgba(220,178,74,.72),rgba(89,147,191,.22) 48%,transparent);
  box-shadow:0 0 18px rgba(201,158,58,.08);
}
.news-entry { background:linear-gradient(145deg,rgba(7,19,31,.88),rgba(4,12,21,.88)); backdrop-filter:blur(7px); }
.news-entry-meta { margin-bottom:13px; }

/* Empty My Builds is intentionally centered and quiet. */
.empty-state.no-builds {
  min-height:52vh;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:10px;
  background:rgba(8,20,33,.58);
}
.empty-state.no-builds svg { width:64px; height:64px; margin:0; color:#6b99bb; }
.empty-state.no-builds h2 { margin:0; font-size:clamp(22px,3vw,30px); }

/* Profile hub */
.profile-shell { max-width:1120px; gap:18px; }
.profile-hero-card,
.profile-section {
  border:1px solid rgba(108,162,205,.16);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(8,22,36,.92),rgba(4,14,24,.92));
  box-shadow:0 22px 60px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.025);
}
.profile-hero-card {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(360px,.8fr);
  gap:22px;
  align-items:center;
  padding:26px;
}
.profile-avatar-wrap { position:relative; width:94px; height:94px; }
.profile-avatar-large {
  width:94px; height:94px; border-radius:50%; display:grid; place-items:center;
  border:2px solid rgba(220,174,65,.72);
  background:radial-gradient(circle at 50% 30%,#1a466b,#081725 66%);
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.28),0 0 28px rgba(34,163,229,.12);
}
.profile-avatar-large svg { width:46px; height:46px; color:#d7e6f0; }
.profile-edit-avatar {
  position:absolute; right:-2px; bottom:2px; width:31px; height:31px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(226,183,76,.65); background:#102438; color:#f0cb70; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.32);
}
.profile-edit-avatar svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; }
.profile-identity { min-width:0; }
.profile-name-line { display:flex; align-items:center; gap:14px; }
.profile-name-line h1 { margin:0; font-size:clamp(30px,4vw,44px); letter-spacing:-.04em; }
.profile-name-line p { margin:4px 0 0; color:#708ba0; font-size:12px; }
.profile-bio { margin:12px 0 0; color:#a9bdcc; max-width:560px; line-height:1.55; font-size:13px; }
.profile-edit-inline { border:0; background:transparent; color:#c9ae67; display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:11px; }
.profile-edit-inline svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; }
.profile-save-user.saved { background:linear-gradient(180deg,#315c4f,#1c3b35); border-color:#59ad90; }
.profile-facts { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.profile-fact { min-height:68px; padding:11px 13px; border:1px solid rgba(104,159,202,.13); border-radius:12px; background:rgba(3,13,23,.55); }
.profile-fact > span { display:block; color:#6d879b; font-size:8px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.profile-fact strong { margin-top:7px; display:flex; align-items:center; gap:7px; font-size:13px; }
.profile-fact strong img { width:24px; height:24px; border-radius:6px; border:1px solid rgba(216,174,70,.28); }
.profile-section { padding:21px; }
.profile-section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.profile-section-head span { color:#cba958; font-size:8px; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.profile-section-head h2 { margin:4px 0 0; font-size:19px; }
.profile-section-head small { color:#6f899e; font-size:10px; }
.profile-build-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.profile-build-card { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid rgba(100,155,197,.13); border-radius:12px; background:rgba(4,15,25,.58); }
.profile-build-open { flex:1; min-width:0; padding:0; border:0; background:transparent; display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer; }
.profile-build-open img { width:48px; height:48px; border-radius:9px; object-fit:cover; border:1px solid rgba(218,174,69,.2); }
.profile-build-open span { min-width:0; }
.profile-build-open strong { display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-build-open small { display:block; margin-top:4px; color:#738b9e; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-build-meta { display:flex; align-items:center; gap:8px; color:#8499aa; font-size:9px; }
.profile-bookmark { height:30px; padding:0 8px; display:flex; align-items:center; gap:5px; border:1px solid rgba(112,162,202,.17); border-radius:8px; background:rgba(9,24,37,.7); color:#9cb1c0; cursor:pointer; font-size:9px; }
.profile-bookmark svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; }
.profile-bookmark.saved { color:#f0cb70; border-color:rgba(220,174,66,.36); background:rgba(81,62,23,.22); }
.profile-saved-empty { min-height:130px; display:grid; place-content:center; justify-items:center; text-align:center; gap:7px; color:#7b92a5; }
.profile-saved-empty svg { width:30px; height:30px; fill:none; stroke:#b59853; stroke-width:1.4; }
.profile-saved-empty strong { color:#dfe8ee; font-size:13px; }
.profile-saved-empty span { font-size:10px; }
.profile-comment-compose { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:10px; align-items:start; padding:12px 0 18px; }
.profile-comment-compose textarea { min-height:72px; resize:vertical; border:1px solid rgba(103,159,200,.16); border-radius:11px; background:rgba(3,13,23,.64); color:#e7eef3; padding:11px; outline:none; }
.profile-comment-compose textarea:focus { border-color:rgba(38,185,255,.4); box-shadow:0 0 0 3px rgba(38,185,255,.05); }
.profile-comment-list { display:grid; gap:4px; }
.profile-comment-avatar { border:0; cursor:pointer; }
.comment-profile-link { border:0; padding:0; background:transparent; color:#e4edf3; font-weight:800; cursor:pointer; }
.comment-profile-link:hover { color:#f1cb6d; }

@media (max-width:900px) {
  .profile-hero-card { grid-template-columns:auto 1fr; }
  .profile-facts { grid-column:1 / -1; }
  .profile-build-grid { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .content-page .page-shell { min-height:calc(100vh - 156px); }
  .landing-legal { bottom:8px; }
  .landing-legal .legal { font-size:8px; }
  .champions-index-page::before, .champions-index-page::after, .news-page::before, .news-page::after { top:66px; }
  .profile-hero-card { grid-template-columns:1fr; text-align:center; }
  .profile-avatar-wrap { margin:0 auto; }
  .profile-name-line { justify-content:center; flex-wrap:wrap; }
  .profile-facts { grid-column:auto; }
  .profile-comment-compose { grid-template-columns:38px minmax(0,1fr); }
  .profile-comment-compose .btn { grid-column:2; justify-self:end; }
}
.profile-preference-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.profile-preference-grid > label { display:grid; gap:6px; color:#7e96a9; font-size:9px; font-weight:750; }
.profile-preference-grid .select { height:40px; }
.profile-toggle-setting { grid-column:1 / -1; min-height:58px; padding:10px 12px; border:1px solid rgba(103,158,199,.13); border-radius:11px; background:rgba(4,15,25,.5); display:flex !important; align-items:center; justify-content:space-between; gap:14px; }
.profile-toggle-setting strong { display:block; color:#e3ebf1; font-size:11px; }
.profile-toggle-setting small { display:block; margin-top:3px; color:#71899b; font-size:9px; font-weight:500; }
.profile-toggle-setting input { width:18px; height:18px; accent-color:#c49a3d; }
@media (max-width:680px) { .profile-preference-grid { grid-template-columns:1fr; } .profile-toggle-setting { grid-column:auto; } }

/* R12 profile polish, rune layout, stats page and news backdrop */
.legal,.landing-legal{display:none!important}

/* One-color professional profile menu */
.profile-menu{
  width:430px;
  padding:8px;
  border:1px solid rgba(124,157,181,.2);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(8,17,27,.985),rgba(4,11,18,.99));
  box-shadow:0 26px 72px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.035);
  overflow:hidden;
}
.profile-menu button{
  position:relative;
  min-height:72px;
  grid-template-columns:48px minmax(0,1fr) 18px;
  gap:14px;
  padding:10px 12px;
  color:#d6e1e8;
  border-radius:0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:transparent;
}
.profile-menu button:last-child{border-bottom:0}
.profile-menu button:hover{background:linear-gradient(90deg,rgba(91,126,151,.1),rgba(255,255,255,.018));color:#fff}
.profile-menu .danger,.profile-menu .danger strong,.profile-menu .danger .profile-menu-icon{color:#d6e1e8}
.profile-menu-icon{
  width:42px;height:42px;flex-basis:42px;border-radius:11px;display:grid;place-items:center;
  color:#c6d3dc!important;border:1px solid rgba(145,170,188,.16)!important;
  background:rgba(255,255,255,.025)!important;box-shadow:none!important;
}
.profile-menu-icon svg{width:22px;height:22px}
.profile-menu button:hover .profile-menu-icon{color:#f1f5f7!important;border-color:rgba(194,211,222,.28)!important;background:rgba(255,255,255,.045)!important}
.profile-menu button strong{font-size:15px;letter-spacing:.005em}
.profile-menu button small{font-size:10px;color:#758b9d;letter-spacing:.01em}
.profile-menu-chevron{color:#607789;font-size:24px;font-family:Georgia,serif;line-height:1;text-align:right;transition:transform .15s ease,color .15s ease}
.profile-menu button:hover .profile-menu-chevron{transform:translateX(2px);color:#b7c7d2}

/* Larger, cleaner profile */
.profile-shell{max-width:1260px;gap:22px;padding-top:34px}
.profile-hero-card{grid-template-columns:auto minmax(0,1fr) minmax(470px,.9fr);gap:30px;padding:34px;border-radius:22px}
.profile-avatar-wrap,.profile-avatar-large{width:124px;height:124px}
.profile-avatar-large{border-width:2px;box-shadow:inset 0 0 0 7px rgba(0,0,0,.27),0 0 38px rgba(37,151,210,.12)}
.profile-avatar-large svg{width:58px;height:58px}
.profile-name-line h1{font-size:clamp(38px,4.4vw,54px)}
.profile-name-line p{font-size:14px;margin-top:6px}
.profile-bio{max-width:640px;font-size:15px;line-height:1.65;margin-top:16px}
.profile-facts{gap:12px}
.profile-fact{
  position:relative;min-height:92px;padding:16px 17px;border-radius:15px;text-align:left;color:inherit;
  border:1px solid rgba(109,161,200,.16);background:linear-gradient(180deg,rgba(6,20,32,.74),rgba(3,13,22,.72));
}
button.profile-fact{font:inherit;width:100%}
.profile-fact>span{font-size:9px;letter-spacing:.14em}
.profile-fact strong{margin-top:10px;font-size:16px;gap:10px}
.profile-fact strong img{width:34px;height:34px;border-radius:9px}
.profile-fact em{position:absolute;right:14px;top:14px;color:#7590a3;font-size:9px;font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.profile-fact-button{cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.profile-fact-button:hover{border-color:rgba(211,176,84,.38);background:linear-gradient(180deg,rgba(16,35,49,.86),rgba(4,16,26,.8));transform:translateY(-1px)}
.profile-section{padding:28px;border-radius:20px}
.profile-section-head{margin-bottom:20px}
.profile-section-head span{font-size:9px}
.profile-section-head h2{font-size:24px;margin-top:6px}
.profile-section-head small{font-size:11px}
.profile-build-grid{gap:14px}
.profile-build-card{padding:14px;border-radius:15px}
.profile-build-open{gap:13px}
.profile-build-open img{width:60px;height:60px;border-radius:12px}
.profile-build-open strong{font-size:14px}
.profile-build-open small{font-size:10px;margin-top:5px}
.profile-build-meta{font-size:10px}
.profile-bookmark{height:34px;padding:0 10px}
.profile-comment-compose{grid-template-columns:44px minmax(0,1fr) auto;gap:12px;padding:14px 0 22px}
.profile-comment-compose textarea{min-height:92px;padding:14px;font-size:13px}
.profile-preference-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
.profile-preference-grid.compact>label{font-size:10px;gap:8px}
.profile-preference-grid.compact .select{height:46px;font-size:12px}

.profile-pref-backdrop{padding:24px}
.profile-pref-modal{width:min(960px,94vw);max-height:86vh;overflow:hidden;border-radius:20px;border:1px solid rgba(132,170,197,.2);background:linear-gradient(180deg,#081725,#040d16);box-shadow:0 38px 120px rgba(0,0,0,.72)}
.profile-pref-modal.role-modal{width:min(720px,94vw)}
.profile-pref-head{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 26px 20px;border-bottom:1px solid rgba(255,255,255,.055)}
.profile-pref-head span{font-size:9px;font-weight:850;letter-spacing:.15em;text-transform:uppercase;color:#c8a857}
.profile-pref-head h3{margin:5px 0 0;font-size:28px}
.profile-pref-head p{margin:6px 0 0;color:#758da0;font-size:12px}
.profile-pref-search{padding:16px 20px 10px}
.profile-pref-search .input{width:100%;height:44px}
.profile-champion-picker{padding:10px 20px 24px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px;max-height:58vh;overflow:auto}
.profile-champion-choice{padding:7px;border:1px solid rgba(111,160,196,.12);border-radius:11px;background:rgba(4,16,26,.68);color:#9fb1be;cursor:pointer;display:grid;gap:6px;text-align:center;font-size:9px}
.profile-champion-choice img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.profile-champion-choice:hover,.profile-champion-choice.selected{border-color:rgba(218,176,68,.45);color:#f0f4f6;background:rgba(21,34,42,.82)}
.profile-role-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:26px}
.profile-role-choice{min-height:118px;border:1px solid rgba(113,160,194,.15);border-radius:14px;background:rgba(5,18,29,.72);color:#dbe5eb;cursor:pointer;display:grid;place-content:center;gap:7px;text-align:center}
.profile-role-choice strong{font-size:17px}.profile-role-choice span{font-size:9px;color:#728a9d}.profile-role-choice:hover,.profile-role-choice.selected{border-color:rgba(219,178,73,.5);background:rgba(39,37,27,.52)}

/* Rune page: closer to the spacious League client structure */
.rune-card{overflow:hidden}
.rune-card-body{background:linear-gradient(180deg,rgba(3,11,19,.72),rgba(2,8,14,.92))}
.rune-editor-layout{grid-template-columns:minmax(0,1.13fr) 1px minmax(420px,.87fr);min-height:720px;gap:0}
.rune-editor-divider{display:block;background:linear-gradient(180deg,transparent,rgba(184,157,89,.28) 15%,rgba(92,132,159,.2) 85%,transparent)}
.rune-editor-divider span{display:none}
.rune-tree-editor{padding:28px 34px 34px;min-height:720px}
.rune-tree-editor.primary{padding-right:42px}
.rune-tree-editor.secondary{padding-left:42px}
.rune-path-summary{min-height:112px;grid-template-columns:82px minmax(0,1fr) auto;padding:12px 14px;border:0;border-radius:0;background:transparent;box-shadow:none}
button.rune-path-summary:hover{background:rgba(255,255,255,.018);box-shadow:none;border-radius:12px}
.rune-path-crest{width:76px;height:76px;border-width:2px;box-shadow:0 0 0 6px rgba(0,0,0,.16),0 0 28px color-mix(in srgb,var(--rune-accent) 16%,transparent)}
.rune-path-crest img{width:49px;height:49px}
.rune-path-copy small{font-size:9px}.rune-path-copy strong{font-size:21px;letter-spacing:.11em}.rune-path-copy em{font-size:12px;margin-top:6px;max-width:310px;line-height:1.45}
.rune-change{font-size:9px;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:7px 10px}
.rune-tree-rail{margin:22px 0 0 38px;border-left:3px solid color-mix(in srgb,var(--rune-accent) 58%,#6d7c87 12%);padding-bottom:4px}
.rune-option-row{min-height:132px;padding-left:44px}
.rune-option-row.keystone-row{min-height:160px;border-bottom:1px solid color-mix(in srgb,var(--rune-accent) 24%,transparent)}
.rune-row-node{left:-13px;width:23px;height:23px;border-width:2px;box-shadow:0 0 0 6px rgba(2,8,14,.92),0 0 18px color-mix(in srgb,var(--rune-accent) 22%,transparent)}
.rune-row-content>small{font-size:10px;color:color-mix(in srgb,var(--rune-accent) 68%,#a5b4bf 32%);margin-bottom:14px;letter-spacing:.18em}
.rune-row-options{gap:18px;min-height:72px}
.rune-choice{width:76px;min-height:88px;padding:7px 5px;gap:6px}
.rune-choice img{width:62px;height:62px}
.rune-choice span{font-size:8px;max-width:74px}
.rune-option-row.keystone-row .rune-choice{width:86px;min-height:102px}
.rune-option-row.keystone-row .rune-choice img{width:72px;height:72px}
.rune-secondary-note{margin:8px 0 0 82px;font-size:10px}
.rune-stat-panel{margin:22px 0 0 38px;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.055)}
.rune-stat-heading{margin-bottom:12px}.rune-stat-heading strong{font-size:12px}.rune-stat-heading span{font-size:9px}
.rune-stat-rows{display:grid;gap:10px}.rune-stat-row{display:flex;gap:12px;flex-wrap:wrap}
.rune-stat-choice{min-height:54px;padding:6px 10px;border-radius:10px}
.rune-stat-choice img{width:34px;height:34px}.rune-stat-choice span{font-size:9px}

/* Read-only rune page stays spacious instead of collapsing into two tiny cards */
.rune-display-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0;padding:0;min-height:560px;background:radial-gradient(circle at 18% 14%,rgba(57,118,158,.07),transparent 35%)}
.rune-display-tree{border:0;border-radius:0;padding:28px 34px;background:transparent}
.rune-display-tree.secondary{border-left:1px solid rgba(255,255,255,.055)}
.rune-display-tree .rune-path-summary{min-height:108px;grid-template-columns:78px minmax(0,1fr);padding:8px 0}
.rune-display-tree .rune-path-crest{width:72px;height:72px}.rune-display-tree .rune-path-crest img{width:47px;height:47px}.rune-display-tree .rune-path-copy strong{font-size:20px}.rune-display-tree .rune-path-copy em{font-size:11px}
.rune-display-picks{position:relative;margin:22px 0 0 36px;padding:12px 0 12px 42px;border:0;border-left:3px solid color-mix(in srgb,var(--rune-accent) 50%,#70808b 12%);display:flex;flex-direction:column;gap:18px}
.rune-display-picks .rune-choice.readonly{position:relative;min-height:58px;align-items:center}
.rune-display-picks .rune-choice.readonly:before{content:"";position:absolute;left:-54px;width:21px;height:21px;border-radius:50%;border:2px solid color-mix(in srgb,var(--rune-accent) 62%,#c8af69 18%);background:#06111b;box-shadow:0 0 0 5px rgba(2,8,14,.9)}
.rune-display-picks .rune-choice.readonly img{width:56px;height:56px;flex-basis:56px}.rune-display-picks .rune-choice.readonly span{max-width:220px;font-size:11px;color:#d4e0e7}
.rune-display-layout>.rune-stat-panel{grid-column:2;margin:-180px 34px 28px 76px;padding-top:20px;align-self:end}

/* News: Nexus destruction atmosphere */
.news-page::before{
  background-image:
    linear-gradient(180deg,rgba(4,8,14,.45),rgba(3,8,14,.68) 56%,rgba(2,7,12,.92)),
    url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/assets/loadouts/nexusfinishers/demaciafinisher/demacia_nexusfinisher_image1.png'),
    url('/assets/summoners-rift-blur.png');
  background-size:cover,cover,cover;
  background-position:center,center 48%,center;
  filter:saturate(.72) brightness(.67) blur(5px);
  transform:scale(1.06);
}
.news-page::after{background:linear-gradient(90deg,rgba(2,7,12,.56),rgba(9,15,22,.08) 48%,rgba(2,7,12,.6)),radial-gradient(circle at 58% 26%,rgba(176,68,41,.17),transparent 37%)}

/* Stats page */
.stats-page{position:relative;isolation:isolate;background:radial-gradient(circle at 50% 0%,#101b2a 0,#070d16 38%,#050a11 100%)}
.stats-shell{max-width:1280px;padding-top:36px;gap:24px}
.stats-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:0 4px 8px}
.stats-heading>div>span{color:#c8a849;font-size:9px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}.stats-heading h1{font-family:Georgia,serif;font-size:clamp(44px,5vw,66px);margin:5px 0 8px;color:#f0eadc}.stats-heading p{margin:0;color:#8da2b2;font-size:13px;max-width:680px;line-height:1.55}.stats-patch-pill{padding:10px 14px;border:1px solid rgba(195,159,66,.27);border-radius:999px;background:rgba(194,158,63,.07);color:#d9bd6d;font-size:10px;font-weight:850;letter-spacing:.08em}
.stats-feature-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(380px,.65fr);gap:16px}
.stats-spotlight,.stats-mini-panel,.stats-tier-row{border:1px solid rgba(115,153,181,.15);background:linear-gradient(145deg,rgba(13,23,35,.94),rgba(6,12,20,.96));box-shadow:0 20px 50px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.025)}
.stats-spotlight{min-height:250px;border-radius:20px;padding:24px 28px;display:grid;grid-template-columns:220px minmax(0,1fr);align-items:center;gap:28px;overflow:hidden;position:relative}.stats-spotlight:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 45%,rgba(123,66,219,.18),transparent 32%);pointer-events:none}.stats-spotlight-art{position:relative;z-index:1;display:grid;place-items:center;height:200px}.stats-spotlight-halo{position:absolute;width:174px;height:104px;border-radius:32px;background:linear-gradient(110deg,#7f2cff,#ce2fa0 60%,#e29f38);filter:saturate(.85);opacity:.7}.stats-spotlight-copy{position:relative;z-index:1}.stats-spotlight-copy>span,.stats-mini-panel>div:first-child>span{color:#b78cff;font-size:9px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.stats-spotlight-copy h2{margin:5px 0 8px;font-family:Georgia,serif;font-size:38px}.stats-spotlight-copy p{color:#8fa3b2;font-size:12px;line-height:1.55;margin:0}.stats-inline-metrics{display:flex;gap:26px;margin-top:24px}.stats-inline-metrics strong{font-size:19px}.stats-inline-metrics small{display:block;margin-top:4px;color:#687f91;font-size:8px;text-transform:uppercase;letter-spacing:.12em}
.stats-mini-panels{display:grid;gap:16px}.stats-mini-panel{border-radius:18px;padding:20px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px}.stats-mini-panel.rising{box-shadow:inset 4px 0 #2498e7,0 20px 50px rgba(0,0,0,.2)}.stats-mini-panel.bans{box-shadow:inset 4px 0 #d84b4b,0 20px 50px rgba(0,0,0,.2)}.stats-mini-panel.rising>div:first-child>span{color:#62b9ef}.stats-mini-panel.bans>div:first-child>span{color:#e26d6d}.stats-mini-panel h3{margin:5px 0 0;font-size:15px}.stats-mini-frames{display:flex;gap:9px}
.stats-champion-frame{position:relative;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center}.stats-frame-ring{display:block;width:68px;height:68px;border-radius:14px;overflow:hidden;border:1px solid rgba(181,197,209,.18);background:#101822;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.stats-frame-ring img{width:100%;height:100%;object-fit:cover}.stats-champion-frame:hover .stats-frame-ring{transform:translateY(-3px) scale(1.035);border-color:rgba(231,190,77,.62);box-shadow:0 10px 24px rgba(0,0,0,.35),0 0 0 2px rgba(229,183,65,.08)}.stats-champion-frame.mini .stats-frame-ring{width:58px;height:58px;border-radius:50%;border:2px solid rgba(255,255,255,.5)}.stats-champion-frame.spotlight .stats-frame-ring{position:relative;width:128px;height:128px;border-radius:50%;border:4px solid rgba(180,98,242,.75);z-index:2;box-shadow:0 0 0 7px rgba(9,15,23,.65),0 10px 30px rgba(0,0,0,.35)}
.stats-tier-board{display:grid;gap:14px;padding-bottom:36px}.stats-tier-row{min-height:128px;border-radius:18px;display:grid;grid-template-columns:118px minmax(0,1fr);overflow:hidden}.stats-tier-badge{display:grid;place-content:center;justify-items:center;gap:3px;background:rgba(255,255,255,.035);border-right:1px solid rgba(255,255,255,.05)}.stats-tier-badge strong{font-size:40px;font-style:italic}.stats-tier-badge span{font-size:8px;color:#8c9dad;text-transform:uppercase;letter-spacing:.12em}.stats-tier-badge i{font-size:8px;letter-spacing:2px;font-style:normal}.tier-s .stats-tier-badge{background:linear-gradient(135deg,#d2a900,#8f7200);color:#121212}.tier-s{border-color:rgba(229,190,30,.52)}.tier-a .stats-tier-badge{background:linear-gradient(135deg,#d9742b,#7b3c1b);color:#fff}.tier-a{border-color:rgba(221,118,47,.32)}.tier-b .stats-tier-badge{background:linear-gradient(135deg,#5d72aa,#2a3457);color:#fff}.tier-b{border-color:rgba(97,119,179,.3)}.stats-tier-champions{display:flex;flex-wrap:wrap;align-content:center;gap:10px;padding:18px 20px}.stats-tier-row .stats-frame-ring{width:66px;height:66px;border-radius:10px}
.stats-hover-card{position:fixed;z-index:500;width:330px;opacity:0;pointer-events:none;transform:translateY(5px) scale(.98);transition:opacity .12s ease,transform .12s ease;border:1px solid rgba(214,178,74,.28);border-radius:16px;background:linear-gradient(180deg,#171e29,#0d131c);box-shadow:0 24px 70px rgba(0,0,0,.58);overflow:hidden}.stats-hover-card.show{opacity:1;transform:translateY(0) scale(1)}.stats-hover-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}.stats-hover-head img{width:48px;height:48px;border-radius:10px}.stats-hover-head strong{display:block;font-size:15px}.stats-hover-head span{display:block;margin-top:3px;color:#e16d6d;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.stats-hover-metrics{display:grid;grid-template-columns:repeat(3,1fr);padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.06)}.stats-hover-metrics div{text-align:center}.stats-hover-metrics strong{font-size:17px}.stats-hover-metrics span{display:block;margin-top:3px;color:#758899;font-size:8px;text-transform:uppercase;letter-spacing:.09em}.stats-hover-build{padding:12px 15px}.stats-hover-build small{display:block;margin-bottom:8px;color:#74899b;font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.12em}.stats-hover-build>div{display:flex;gap:7px}.stats-hover-build img{width:38px;height:38px;border-radius:8px;border:1px solid rgba(255,255,255,.08)}.stats-hover-link{padding:11px 15px;border-top:1px solid rgba(255,255,255,.06);color:#d5dee5;font-size:10px;font-weight:750}.stats-hover-link span{float:right;color:#d9b65e;font-size:15px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1050px){.profile-hero-card{grid-template-columns:auto 1fr}.profile-facts{grid-column:1/-1}.stats-feature-row{grid-template-columns:1fr}.rune-editor-layout{grid-template-columns:1fr}.rune-editor-divider{display:none}.rune-tree-editor.secondary{border-top:1px solid rgba(255,255,255,.055)}.rune-display-layout{grid-template-columns:1fr}.rune-display-tree.secondary{border-left:0;border-top:1px solid rgba(255,255,255,.055)}.rune-display-layout>.rune-stat-panel{grid-column:1;margin:0 34px 28px 76px}.profile-champion-picker{grid-template-columns:repeat(6,1fr)}}
@media(max-width:700px){.profile-menu{width:min(400px,calc(100vw - 16px))}.profile-hero-card{grid-template-columns:1fr;text-align:center;padding:24px}.profile-avatar-wrap{margin:auto}.profile-name-line{justify-content:center}.profile-facts{grid-template-columns:1fr 1fr;text-align:left}.profile-preference-grid.compact{grid-template-columns:1fr}.profile-champion-picker{grid-template-columns:repeat(4,1fr)}.profile-role-picker{grid-template-columns:1fr 1fr}.rune-tree-editor{padding:20px 16px}.rune-tree-editor.primary,.rune-tree-editor.secondary{padding-left:16px;padding-right:16px}.rune-tree-rail{margin-left:28px}.rune-option-row{padding-left:30px}.rune-row-options{gap:10px}.rune-choice{width:62px}.rune-choice img{width:52px;height:52px}.rune-stat-panel{margin-left:28px}.stats-spotlight{grid-template-columns:1fr;text-align:center}.stats-inline-metrics{justify-content:center}.stats-mini-panel{grid-template-columns:1fr}.stats-tier-row{grid-template-columns:76px 1fr}.stats-tier-badge strong{font-size:32px}.stats-tier-champions{padding:13px}.stats-tier-row .stats-frame-ring{width:54px;height:54px}}

/* R13 polish: profile menu, stats spotlight, rune shards, item sequencing, hero framing */

/* Cleaner League-inspired account menu: tighter scale, unified gold/ice icon treatment */
.profile-menu{
  width:356px;
  padding:7px;
  border:1px solid rgba(126,164,190,.2);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(9,20,31,.992),rgba(4,12,20,.995));
  box-shadow:0 26px 72px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.035);
}
.profile-menu::before{
  content:"";
  display:block;
  height:1px;
  margin:0 10px 4px;
  background:linear-gradient(90deg,transparent,rgba(211,176,85,.5),rgba(78,170,222,.35),transparent);
}
.profile-menu button{
  min-height:62px;
  grid-template-columns:42px minmax(0,1fr) 14px;
  gap:12px;
  padding:9px 11px;
  border-bottom:1px solid rgba(138,169,191,.095);
}
.profile-menu button::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:2px;
  border-radius:99px;
  background:linear-gradient(#d1ae59,#62bce8);
  opacity:0;
  transform:scaleY(.45);
  transition:opacity .15s ease,transform .15s ease;
}
.profile-menu button:hover::before{opacity:.9;transform:scaleY(1)}
.profile-menu button:hover{background:linear-gradient(90deg,rgba(42,84,112,.12),rgba(192,157,73,.035) 75%,transparent)}
.profile-menu-icon{
  width:36px;height:36px;flex-basis:36px;border-radius:9px;
  color:#d9c27c!important;
  border:1px solid rgba(194,166,93,.22)!important;
  background:linear-gradient(145deg,rgba(197,165,80,.08),rgba(47,128,174,.075))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025)!important;
}
.profile-menu-icon svg{width:20px;height:20px}
.profile-menu button:hover .profile-menu-icon{
  color:#9bdcff!important;
  border-color:rgba(106,190,232,.34)!important;
  background:linear-gradient(145deg,rgba(62,145,190,.14),rgba(201,169,83,.08))!important;
}
.profile-menu .danger,.profile-menu .danger strong,.profile-menu .danger .profile-menu-icon{color:#d9c27c!important}
.profile-menu button strong{font-size:13.5px}
.profile-menu button small{font-size:9.2px;color:#7890a2}
.profile-menu-chevron{font-size:20px;color:#647d90}

/* Stats begins with the current spotlight champion splash rather than a text header. */
.stats-shell{max-width:1280px;padding-top:26px;gap:18px}
.stats-spotlight-banner{
  position:relative;
  min-height:300px;
  overflow:hidden;
  border:1px solid rgba(127,163,189,.16);
  border-radius:22px;
  background:#07111b;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.stats-spotlight-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(90deg,rgba(3,9,16,.91) 0%,rgba(4,11,18,.68) 34%,rgba(4,10,17,.16) 68%,rgba(3,9,15,.34) 100%),
    linear-gradient(180deg,rgba(3,9,15,.08),rgba(3,9,15,.5)),
    var(--spotlight-splash);
  background-size:cover,cover,cover;
  background-position:center,center,center 28%;
  filter:saturate(.88) contrast(1.03);
  transform:scale(1.015);
}
.stats-spotlight-banner::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:38%;
  background:linear-gradient(transparent,#070d16 90%);
  pointer-events:none;
}
.stats-banner-copy{
  position:relative;
  z-index:2;
  width:min(620px,62%);
  min-height:300px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:30px 34px;
}
.stats-banner-copy>span{color:#d6b65c;font-size:9px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}
.stats-banner-identity{display:flex;align-items:center;gap:18px;margin-top:12px}
.stats-banner-identity h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,4.3vw,60px);line-height:.98;color:#f2ecdf}
.stats-banner-identity p{margin:8px 0 0;max-width:410px;color:#a4b5c1;font-size:12px;line-height:1.55}
.stats-banner-identity .stats-champion-frame.spotlight .stats-frame-ring{width:88px;height:88px;border-width:3px;box-shadow:0 0 0 5px rgba(4,11,18,.65),0 10px 30px rgba(0,0,0,.35)}
.stats-banner-identity .stats-frame-pulse{display:none}
.stats-banner-copy .stats-inline-metrics{margin-top:22px}
.stats-mini-panels.stats-mini-panels-wide{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stats-mini-panels.stats-mini-panels-wide .stats-mini-panel{min-height:112px}

/* News patch context */
.news-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.news-current-patch{
  display:flex;align-items:center;gap:9px;margin-bottom:5px;padding:9px 12px;
  border:1px solid rgba(199,164,76,.28);border-radius:999px;
  background:rgba(201,166,75,.075);box-shadow:inset 0 1px rgba(255,255,255,.025)
}
.news-current-patch span{color:#7e93a3;font-size:8px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
.news-current-patch strong{color:#e2c46f;font-size:11px;letter-spacing:.05em}
.news-entry-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:13px}
.news-entry-top .news-entry-meta{margin-bottom:0}
.news-patch-pill{
  flex:0 0 auto;padding:10px 14px;border:1px solid rgba(195,159,66,.27);border-radius:999px;
  background:rgba(194,158,63,.07);color:#d9bd6d;font-size:10px;font-weight:850;letter-spacing:.08em
}

/* Full item build sits immediately under Starter Items and uses the available width evenly. */
.champion-build-columns{align-items:start}
.champion-build-columns .view-upper-main,
.champion-build-columns .view-upper-side{align-content:start}
.full-item-card .card-body{padding-top:14px;padding-bottom:14px}
.full-item-card .item-variants{
  display:grid;
  grid-template-rows:repeat(3,minmax(118px,1fr));
  gap:12px;
}
.full-item-card .item-variant{
  min-height:118px;
  padding:12px 13px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.item-variant-head{min-height:24px;margin-bottom:10px}
.item-variant-head strong{font-size:12.5px}
.item-variant-label{height:32px;font-size:11.5px;max-width:340px}
.full-item-card .slot-row.item-sequence{
  width:100%;
  display:grid;
  grid-template-columns:64px minmax(18px,1fr) 64px minmax(18px,1fr) 64px minmax(18px,1fr) 64px minmax(18px,1fr) 64px minmax(18px,1fr) 64px;
  align-items:center;
  gap:5px;
}
.full-item-card .item-slot{width:64px;height:64px;justify-self:center}
.item-sequence-step{
  justify-self:center;
  color:#7c91a0;
  font-size:22px;
  line-height:1;
  font-family:Georgia,"Times New Roman",serif;
  opacity:.7;
}
.item-variant:hover .item-sequence-step{color:#c9aa58;opacity:.9}

/* Rune shard selector now lives at the top of the secondary tile and breathes like the client. */
.rune-tree-editor.secondary>.rune-stat-panel{
  margin:14px 0 16px;
  padding:14px 12px 17px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:13px;
  background:rgba(2,9,16,.28);
}
.rune-stat-heading{text-align:center;margin:0 0 14px}
.rune-stat-heading strong{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#d8c783}
.rune-stat-rows{gap:12px}
.rune-stat-row{display:flex;justify-content:space-evenly;align-items:center;gap:18px;flex-wrap:nowrap}
.rune-stat-choice{
  min-width:0;
  flex:0 1 30%;
  justify-content:center;
  padding:7px 9px;
}
.rune-stat-choice img{width:36px;height:36px;flex:0 0 36px}
.rune-stat-choice span{font-size:8.5px;line-height:1.25}
.rune-tree-editor.secondary .rune-tree-rail{margin-top:18px}
.rune-display-secondary-column{display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.055)}
.rune-display-secondary-column>.rune-stat-panel{
  order:0;
  margin:24px 30px 0;
  padding:14px 14px 16px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:13px;
  background:rgba(2,9,16,.28);
}
.rune-display-secondary-column>.rune-display-tree{order:1;border-left:0}
.rune-display-layout>.rune-stat-panel{margin:0}

/* Item tooltip grouping: unique/passive names stay attached to their effect. */
.item-tooltip-description .item-desc-block strong{white-space:nowrap}
.item-tooltip-description .item-desc-block:not(.item-desc-stats){line-height:1.62}

/* Champion banners: show more vertical artwork and bias the crop upward. */
.champion-hero{min-height:410px}
.champion-hero-bg{
  background-position:center 7%;
  background-size:cover;
  filter:saturate(.9) contrast(1.01) brightness(.94);
}
.champion-hero-content{padding-top:116px;padding-bottom:38px}

@media(max-width:1050px){
  .stats-banner-copy{width:min(720px,78%)}
  .stats-mini-panels.stats-mini-panels-wide{grid-template-columns:1fr}
  .rune-display-secondary-column{border-left:0;border-top:1px solid rgba(255,255,255,.055)}
  .rune-display-secondary-column>.rune-stat-panel{margin:20px 24px 0}
}
@media(max-width:760px){
  .profile-menu{width:min(344px,calc(100vw - 18px))}
  .stats-spotlight-banner{min-height:340px}
  .stats-spotlight-banner::before{background-position:center,center,62% 24%}
  .stats-banner-copy{width:100%;min-height:340px;padding:24px}
  .stats-banner-identity{align-items:flex-end}
  .stats-banner-identity p{display:none}
  .news-heading{align-items:flex-start;flex-direction:column}
  .news-current-patch{margin:0}
  .news-entry-top{align-items:flex-start}
  .full-item-card .slot-row.item-sequence{min-width:520px}
  .full-item-card .item-variant{overflow-x:auto}
  .champion-hero{min-height:360px}
  .champion-hero-bg{background-position:center 4%}
  .rune-stat-row{gap:8px}
  .rune-stat-choice span{display:none}
}

/* R14 profile/rune/menu refinements */
.profile-menu{
  width:420px;
  padding:9px;
  border-radius:16px;
}
.profile-menu::before{margin:0 8px 5px}
.profile-menu button{
  width:100%;
  min-height:76px;
  grid-template-columns:48px minmax(0,1fr) 18px;
  gap:14px;
  padding:11px 14px;
  border-radius:10px;
  margin:0;
}
.profile-menu button+button{border-top:1px solid rgba(130,164,187,.08)}
.profile-menu-icon{width:42px;height:42px;flex-basis:42px;border-radius:10px}
.profile-menu-icon svg{width:23px;height:23px}
.profile-menu button strong{font-size:15px}
.profile-menu button small{font-size:10px;line-height:1.35}
.profile-menu-chevron{font-size:23px}

.profile-avatar-wrap{height:auto!important;display:flex;flex-direction:column;align-items:center;gap:10px}
.profile-bio-edit{
  border:1px solid rgba(202,169,82,.28);border-radius:999px;padding:7px 13px;
  background:rgba(202,169,82,.07);color:#d9c27b;font:800 10px/1 inherit;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer
}
.profile-bio-edit:hover{background:rgba(202,169,82,.13);border-color:rgba(202,169,82,.44)}
.profile-bio-editor{width:100%;min-height:150px;resize:vertical;border:1px solid rgba(112,156,185,.22);border-radius:13px;background:#07131f;color:#e7eff4;padding:14px 15px;font:500 14px/1.6 inherit;outline:none}
.profile-bio-editor:focus{border-color:rgba(211,176,84,.48);box-shadow:0 0 0 3px rgba(211,176,84,.07)}
.profile-bio-actions{display:flex;justify-content:center;gap:10px;margin-top:14px}

/* Secondary rune selections stay at the top; stat shards sit at the bottom-right. */
.rune-tree-editor.secondary>.rune-stat-panel{margin:24px 0 0!important;order:3}
.rune-tree-editor.secondary .rune-tree-rail{margin-top:18px!important}
.rune-display-secondary-column>.rune-display-tree{order:0!important}
.rune-display-secondary-column>.rune-stat-panel{order:1!important;margin:0 30px 26px!important}
.rune-display-secondary-column{justify-content:space-between}

@media(max-width:760px){
  .profile-menu{width:min(410px,calc(100vw - 18px))}
  .profile-menu button{min-height:70px}
}

/* R15 editor safety, starter labels, profile empty state, and landing hover polish */
.unsaved-build-backdrop{
  background:rgba(1,7,12,.78);
  backdrop-filter:blur(10px);
}
.unsaved-build-modal{
  width:min(480px,calc(100vw - 28px));
  padding:30px 30px 26px;
  border:1px solid rgba(193,158,70,.34);
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 0%,rgba(45,119,157,.14),transparent 46%),
    linear-gradient(180deg,#0b1a28,#07111b 72%);
  box-shadow:0 28px 90px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.035);
  text-align:center;
}
.unsaved-build-mark{
  width:58px;height:58px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(221,181,76,.52);background:rgba(198,155,52,.09);
  box-shadow:0 0 26px rgba(194,153,48,.08),inset 0 0 0 5px rgba(255,255,255,.018);
}
.unsaved-build-mark span{font:800 26px/1 Georgia,serif;color:#e8c66d}
.unsaved-build-modal h3{margin:0;color:#f2f6f8;font-size:23px;letter-spacing:-.025em}
.unsaved-build-modal p{max-width:365px;margin:11px auto 0;color:#8ea5b6;font-size:13px;line-height:1.65}
.unsaved-build-actions{display:flex;justify-content:center;gap:11px;margin-top:24px}
.unsaved-build-actions .btn{min-width:132px;height:42px}
.danger-button{border:1px solid rgba(204,106,91,.34)!important;background:linear-gradient(180deg,rgba(121,48,40,.52),rgba(77,30,27,.52))!important;color:#f2c5bd!important}
.danger-button:hover{border-color:rgba(224,126,108,.58)!important;background:linear-gradient(180deg,rgba(144,58,48,.64),rgba(91,35,31,.62))!important}

.starter-label-input{
  width:min(180px,72%);min-width:0;border:0;border-bottom:1px solid transparent;padding:2px 0 3px;
  background:transparent;color:#e9eff3;font:800 11px/1.2 inherit;outline:none;
  text-overflow:ellipsis;
}
.starter-label-input:hover{border-bottom-color:rgba(103,165,202,.23)}
.starter-label-input:focus{border-bottom-color:rgba(218,178,73,.58);color:#f5df9a}

.profile-saved-empty{min-height:210px;gap:13px}
.profile-saved-empty svg{width:58px;height:58px;stroke-width:1.25;filter:drop-shadow(0 0 16px rgba(181,152,83,.12))}
.profile-saved-empty strong{font-size:20px;letter-spacing:-.02em}

.bio-modal{width:min(560px,calc(100vw - 28px));padding:24px}
.bio-pref-head{align-items:center;margin-bottom:16px}
.bio-pref-head>div{flex:1;text-align:center;padding-left:34px}
.bio-pref-head p{margin:0;color:#c6d4de;font-size:15px;font-weight:700;line-height:1.45}
.profile-bio-actions{display:grid;grid-template-columns:repeat(2,minmax(130px,170px));justify-content:center;gap:12px;margin-top:18px}
.profile-bio-actions .btn{width:100%;height:42px}

.landing-champion-hover{z-index:650}

@media(max-width:620px){
  .unsaved-build-actions{flex-direction:column}
  .unsaved-build-actions .btn{width:100%}
  .starter-label-input{width:68%}
  .profile-bio-actions{grid-template-columns:1fr 1fr}
}
.rune-secondary-note{display:none!important}

/* R16 profile focus, champion identity stack, six-item hover builds */
.champions-heading-copy p{
  max-width:none;
  white-space:nowrap;
  font-size:clamp(14px,1.25vw,18px);
}

.profile-hero-card{
  grid-template-columns:auto minmax(0,1fr) minmax(560px,1.05fr);
  align-items:center;
}
.profile-facts.profile-facts-primary{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.profile-fact.profile-fact-featured{
  min-height:126px;
  padding:20px 22px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.profile-fact.profile-fact-featured>span{
  font-size:10px;
  letter-spacing:.15em;
  color:#79a4c3;
}
.profile-fact.profile-fact-featured strong{
  margin-top:14px;
  gap:13px;
  font-size:22px;
  line-height:1;
}
.profile-fact.profile-fact-featured strong b{font-weight:850}
.profile-fact.profile-fact-featured strong img{
  width:48px;
  height:48px;
  border-radius:11px;
  border-color:rgba(218,177,71,.42);
  box-shadow:0 0 0 3px rgba(0,0,0,.18);
}
.profile-role-icon{
  width:50px;
  height:50px;
  flex:0 0 50px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#e2c36d;
  border:1px solid rgba(213,174,72,.28);
  background:linear-gradient(180deg,rgba(68,54,24,.2),rgba(10,26,38,.82));
}
.role-position-icon{width:31px;height:31px;object-fit:contain;display:block;filter:brightness(0) saturate(100%) invert(78%) sepia(18%) saturate(1050%) hue-rotate(354deg) brightness(91%) contrast(89%)}
.profile-fact-button:hover .profile-role-icon{color:#f0d883;border-color:rgba(231,193,91,.5)}

.profile-role-picker{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  padding:28px;
}
.profile-role-choice{
  min-height:142px;
  gap:12px;
  border-radius:16px;
  padding:16px 10px;
}
.profile-role-choice-icon{
  width:66px;
  height:66px;
  margin:auto;
  display:grid;
  place-items:center;
  color:#93aabb!important;
  border:1px solid rgba(124,163,190,.18);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(18,40,55,.72),rgba(5,16,26,.72));
}
.profile-role-choice-icon .role-position-icon{width:40px;height:40px;object-fit:contain}
.profile-role-choice strong{font-size:16px}
.profile-role-choice:hover .profile-role-choice-icon,
.profile-role-choice.selected .profile-role-choice-icon{
  color:#e4c56d!important;
  border-color:rgba(219,178,73,.48);
  box-shadow:0 0 24px rgba(214,174,67,.08);
}

/* Starter option labels use the same editable tile treatment as full-build variant names. */
.starter-label-input{
  width:min(210px,78%);
  height:32px;
  border:1px solid rgba(104,159,202,.17);
  border-radius:8px;
  padding:0 10px;
  background:rgba(8,20,33,.82);
  color:#edf3f6;
  font:800 11.5px/1 inherit;
  outline:0;
}
.starter-label-input:hover{border-color:rgba(104,159,202,.3)}
.starter-label-input:focus{border-color:rgba(38,185,255,.48);box-shadow:0 0 0 3px rgba(38,185,255,.05);color:#f5df9a}

/* Profile build actions are easier to read at a glance. */
.profile-build-meta{gap:12px;font-size:11px}
.profile-build-likes{display:inline-flex;align-items:center;gap:6px;color:#aebdca;font-weight:800}
.profile-build-likes b{font-size:22px;line-height:1;color:#e45f69;text-shadow:0 0 12px rgba(228,95,105,.16)}
.profile-bookmark{height:38px;padding:0 12px;gap:7px;font-size:10px}
.profile-bookmark svg{width:19px;height:19px}

/* Larger account dropdown with rows that fill the surface. */
.profile-menu{
  top:58px;
  width:450px;
  padding:6px;
  border-radius:18px;
}
.profile-menu::before{margin:0 10px 6px}
.profile-menu button{
  min-height:84px;
  grid-template-columns:52px minmax(0,1fr) 20px;
  gap:15px;
  padding:13px 16px;
  border-radius:11px;
}
.profile-menu-icon{width:46px;height:46px;flex-basis:46px;border-radius:12px}
.profile-menu-icon svg{width:25px;height:25px}
.profile-menu button strong{font-size:16px}
.profile-menu button small{font-size:10.5px;line-height:1.35}
.profile-menu-chevron{font-size:24px}

/* Champion build hero: identity, build name, then three metadata tiles. */
.champion-hero-view-content{align-items:flex-end}
.champion-build-identity-stack{
  min-width:min(660px,72vw);
  max-width:780px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
}
.champion-build-identity-row{
  display:flex;
  align-items:flex-end;
  gap:18px;
}
.champion-build-identity-row h1{
  margin:0 0 3px;
  color:#f6f8f9;
  font-size:clamp(42px,5vw,66px);
  line-height:.92;
  letter-spacing:-.05em;
  text-shadow:0 3px 18px rgba(0,0,0,.46);
}
.champion-build-title-button{
  min-width:360px;
  max-width:610px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 14px;
  margin-left:calc(86px + 18px);
  border:1px solid rgba(207,169,73,.32);
  border-radius:10px;
  background:linear-gradient(90deg,rgba(5,18,29,.91),rgba(7,26,41,.82));
  color:#edf3f6;
  cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.champion-build-title-button:hover{border-color:rgba(230,191,88,.6);background:linear-gradient(90deg,rgba(9,28,43,.96),rgba(9,31,48,.9))}
.champion-build-title-button strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.champion-build-title-button span{color:#cbb069;font-size:18px}
.champion-build-meta-tiles{
  margin-left:calc(86px + 18px);
  display:grid;
  grid-template-columns:repeat(3,minmax(126px,1fr));
  gap:8px;
  width:min(610px,calc(100vw - 180px));
}
.champion-build-meta-tiles>div{
  min-height:48px;
  padding:8px 12px;
  border:1px solid rgba(101,158,201,.16);
  border-radius:9px;
  background:rgba(4,16,26,.75);
}
.champion-build-meta-tiles small{
  display:block;
  color:#678398;
  font-size:8px;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.champion-build-meta-tiles strong{
  display:block;
  margin-top:4px;
  color:#e7eef2;
  font-size:11.5px;
}

.stats-hover-build>div{justify-content:space-between;gap:6px}
.stats-hover-build img{width:39px;height:39px;flex:0 0 39px}

@media(max-width:1180px){
  .champions-heading-copy p{white-space:normal}
  .profile-hero-card{grid-template-columns:auto 1fr}
  .profile-facts.profile-facts-primary{grid-column:1/-1}
  .champion-build-identity-stack{min-width:0;max-width:calc(100vw - 180px)}
}
@media(max-width:760px){
  .profile-facts.profile-facts-primary{grid-template-columns:1fr}
  .profile-fact.profile-fact-featured{min-height:104px}
  .profile-role-picker{grid-template-columns:repeat(2,minmax(0,1fr));padding:20px}
  .profile-menu{width:min(430px,calc(100vw - 16px))}
  .profile-menu button{min-height:76px}
  .champion-build-identity-stack{max-width:100%;width:100%}
  .champion-build-identity-row{gap:12px}
  .champion-build-identity-row h1{font-size:38px}
  .champion-build-title-button,.champion-build-meta-tiles{margin-left:0;width:100%;min-width:0;max-width:none}
  .champion-build-meta-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* R17 champion hero stabilization + cleaner build explorer header. */
.champion-build-identity-stack{
  min-width:min(760px,76vw);
  max-width:860px;
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  column-gap:18px;
  align-items:start;
}
.champion-build-main-portrait{
  width:112px;
  height:112px;
  grid-column:1;
  grid-row:1;
  align-self:start;
}
.champion-build-identity-details{
  grid-column:2;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.champion-build-identity-details h1{
  margin:0 0 1px;
  color:#f6f8f9;
  font-size:clamp(42px,5vw,66px);
  line-height:.92;
  letter-spacing:-.05em;
  text-shadow:0 3px 18px rgba(0,0,0,.46);
}
.champion-build-title-button{
  width:100%;
  min-width:0;
  max-width:none;
  height:46px;
  margin-left:0;
  padding:0 15px;
}
.champion-build-title-button strong{
  min-width:0;
  font-size:14px;
  text-align:left;
}
.explore-builds-cta{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  color:#d8c783;
  font-size:10px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
  white-space:nowrap;
}
.explore-builds-cta b{
  color:#72b9e7;
  font-size:19px;
  font-weight:500;
  line-height:1;
  transform:translateY(-1px);
}
.champion-build-title-button:hover .explore-builds-cta{color:#f0d982}
.champion-build-meta-tiles{
  margin-left:0;
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.champion-build-title-loading{cursor:default;opacity:.94}
.champion-build-title-loading:hover{border-color:rgba(207,169,73,.32);background:linear-gradient(90deg,rgba(5,18,29,.91),rgba(7,26,41,.82))}
.champion-hero-loading .champion-hero-content{
  min-height:294px;
}

@media(max-width:1180px){
  .champion-build-identity-stack{min-width:0;max-width:calc(100vw - 180px);width:min(760px,100%)}
}
@media(max-width:760px){
  .champion-build-identity-stack{
    width:100%;
    max-width:100%;
    grid-template-columns:82px minmax(0,1fr);
    column-gap:12px;
  }
  .champion-build-main-portrait{width:82px;height:82px}
  .champion-build-identity-details h1{font-size:38px}
  .explore-builds-cta{font-size:8.5px;letter-spacing:.04em;gap:4px}
  .champion-build-title-button{height:44px;padding:0 11px}
  .champion-build-meta-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .champion-build-meta-tiles>div{padding:8px 9px}
}

/* V18 — Builds discovery page */
.builds-index-page{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  background:#050a10;
  overflow:hidden;
}
.builds-index-page::before{
  content:"";
  position:fixed;
  z-index:-2;
  left:-4vw;
  right:-4vw;
  top:72px;
  bottom:-5vh;
  background:
    linear-gradient(rgba(2,8,13,.44),rgba(2,8,13,.73)),
    url('https://1.bp.blogspot.com/-6Sjt3KuhRI8/VWfLkJerZYI/AAAAAAAAqnU/vt2jXWaywSs/s1600/distance1.jpg') center 46% / cover no-repeat;
  filter:blur(10px) saturate(.78) brightness(.7);
  transform:scale(1.085);
}
.builds-index-page::after{
  content:"";
  position:fixed;
  z-index:-1;
  inset:72px 0 0;
  background:
    radial-gradient(circle at 16% 16%,rgba(46,99,111,.14),transparent 34%),
    radial-gradient(circle at 82% 68%,rgba(88,45,107,.12),transparent 32%),
    linear-gradient(90deg,rgba(2,8,13,.74),rgba(4,11,18,.38) 45%,rgba(2,8,13,.7));
  pointer-events:none;
}
.builds-page-shell{position:relative;z-index:1;padding-top:46px;padding-bottom:74px;max-width:1360px}
.builds-page-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.builds-page-heading h1{margin:0;color:#f3f4ef;font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,4.4vw,66px);line-height:.98;letter-spacing:-.035em;text-shadow:0 3px 20px rgba(0,0,0,.34)}
.builds-page-heading span{display:block;margin-top:10px;color:#8ca5b7;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.builds-filter-bar{display:grid;grid-template-columns:minmax(190px,1.35fr) repeat(3,minmax(150px,.8fr));gap:10px;padding:14px;border:1px solid rgba(112,159,191,.16);border-radius:16px;background:linear-gradient(180deg,rgba(7,20,31,.93),rgba(4,14,23,.93));box-shadow:0 18px 48px rgba(0,0,0,.22);backdrop-filter:blur(18px);margin-bottom:14px}
.builds-filter-bar label>span{display:block;margin:0 0 7px 2px;color:#7090a8;font-size:9px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.build-filter-control{position:relative}
.build-filter-control select{appearance:none;width:100%;height:42px;padding:0 38px 0 13px;border:1px solid rgba(115,163,198,.18);border-radius:10px;background:#061421;color:#edf3f7;font-size:12px;font-weight:750;outline:none;cursor:pointer}
.build-filter-control select:focus{border-color:rgba(213,172,72,.66);box-shadow:0 0 0 2px rgba(213,172,72,.08)}
.build-filter-control b{position:absolute;right:13px;top:50%;transform:translateY(-53%);color:#d6ae4d;font-size:14px;pointer-events:none}
.build-discovery-list{display:grid;gap:10px}
.build-discovery-card{width:100%;min-height:102px;display:grid;grid-template-columns:74px minmax(210px,.8fr) minmax(560px,1.45fr);align-items:center;gap:16px;padding:13px 16px 13px 13px;border:1px solid rgba(107,157,190,.16);border-radius:15px;background:linear-gradient(90deg,rgba(7,19,30,.95),rgba(5,15,25,.9));box-shadow:0 12px 30px rgba(0,0,0,.16);cursor:pointer;text-align:left;color:inherit;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.build-discovery-card:hover{transform:translateY(-1px);border-color:rgba(221,177,70,.44);background:linear-gradient(90deg,rgba(9,25,39,.98),rgba(6,18,29,.96));box-shadow:0 18px 38px rgba(0,0,0,.23)}
.build-discovery-champion{width:72px;height:72px;display:block;border:1px solid rgba(221,177,70,.45);border-radius:13px;padding:3px;background:linear-gradient(145deg,#6f571e,#0a2233 62%);box-shadow:0 7px 18px rgba(0,0,0,.3)}
.build-discovery-champion img{width:100%;height:100%;display:block;object-fit:cover;border-radius:9px}
.build-discovery-copy{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px}
.build-discovery-champion-line{display:flex;align-items:center;gap:7px;min-width:0;font-size:12px;font-weight:850}
.build-discovery-champion-line strong{color:#d9b65f;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.build-discovery-champion-line i{font-style:normal;color:#526d80}
.build-discovery-champion-line span{color:#8fa5b5;font-size:12px;font-weight:750;white-space:nowrap}
.build-discovery-build-name{display:block;color:#f4f7f8;font-size:17px;font-weight:900;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.build-discovery-loadout{display:grid;grid-template-columns:52px 54px minmax(0,1fr) auto;align-items:center;justify-self:stretch;gap:13px;padding-left:18px;border-left:1px solid rgba(121,164,194,.12)}
.build-discovery-role{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(124,163,190,.17);border-radius:12px;background:linear-gradient(180deg,rgba(17,37,51,.82),rgba(5,16,26,.82));box-shadow:inset 0 0 20px rgba(74,139,179,.035)}
.build-discovery-role .role-position-icon{width:35px;height:35px;display:block;filter:brightness(0) saturate(100%) invert(78%) sepia(18%) saturate(1050%) hue-rotate(354deg) brightness(91%) contrast(89%)}
.build-discovery-like{height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#d8e2e8;font-size:11px;font-weight:900}
.build-discovery-like b{color:#f0525e;font-size:29px;line-height:.92;text-shadow:0 0 18px rgba(240,82,94,.25)}
.build-discovery-like span{font-size:11px;line-height:1;color:#cbd6dd}
.build-discovery-items{display:grid;grid-template-columns:repeat(6,minmax(42px,1fr));gap:8px;justify-content:end}
.build-discovery-items img{width:100%;max-width:54px;aspect-ratio:1;object-fit:cover;border-radius:9px;border:1px solid rgba(113,159,192,.17);background:#020912;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.build-discovery-spells{display:grid;grid-template-columns:repeat(2,45px);gap:7px}
.build-discovery-spells img{width:45px;height:45px;object-fit:cover;border-radius:9px;border:1px solid rgba(217,174,69,.27);background:#020912}
.builds-pagination{min-height:76px;margin-top:18px;padding:12px 14px;display:flex;align-items:center;gap:10px;border:1px solid rgba(112,159,191,.14);border-radius:15px;background:rgba(5,15,24,.9);box-shadow:0 14px 32px rgba(0,0,0,.18)}
.build-page-arrow,.build-page-number{border:0;background:transparent;color:#b8c7d0;cursor:pointer}
.build-page-arrow{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.035);font-size:24px;line-height:1}
.build-page-arrow:hover:not(:disabled){background:rgba(255,255,255,.075);color:#fff}.build-page-arrow:disabled{opacity:.28;cursor:default}
.build-page-numbers{display:flex;align-items:center;gap:5px}
.build-page-number{min-width:42px;height:44px;padding:0 9px;position:relative;font-size:15px;font-weight:850}
.build-page-number:hover{color:#e8c86d}.build-page-number.active{color:#39a5ff}
.build-page-number.active::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:#39a5ff;border-radius:999px}
.build-page-ellipsis{min-width:42px;text-align:center;color:#7f8b92;letter-spacing:3px;font-weight:900}
.build-page-size{margin-left:auto;height:44px;display:flex;align-items:center;gap:10px;color:#d7e0e6;font-size:12px;font-weight:750}
.build-page-size strong{min-width:72px;height:42px;display:flex;align-items:center;padding-left:16px;border:1px solid rgba(148,171,185,.25);border-radius:10px;color:#f1f4f5;font-size:15px;background:rgba(255,255,255,.025)}
.build-page-size b{margin-left:-34px;margin-right:12px;color:#c9d2d7;font-size:16px}
.builds-empty{padding:70px 20px;text-align:center;border:1px dashed rgba(116,163,196,.19);border-radius:15px;background:rgba(6,17,27,.78);color:#8198aa}

@media (max-width:980px){
  .builds-filter-bar{grid-template-columns:1fr 1fr}
  .build-discovery-card{grid-template-columns:66px minmax(0,1fr);gap:12px}
  .build-discovery-champion{width:64px;height:64px}
  .build-discovery-loadout{grid-column:1/-1;grid-template-columns:48px 50px minmax(0,1fr) auto;padding:10px 0 0;border-left:0;border-top:1px solid rgba(121,164,194,.1)}
  .build-discovery-items{grid-template-columns:repeat(6,48px);justify-content:start}
}
@media (max-width:620px){
  .builds-page-shell{padding-top:28px}
  .builds-filter-bar{grid-template-columns:1fr}
  .build-discovery-card{grid-template-columns:54px minmax(0,1fr);padding:10px}
  .build-discovery-champion{width:52px;height:52px;border-radius:10px}
  .build-discovery-build-name{font-size:15px}
  .build-discovery-loadout{overflow-x:auto;grid-template-columns:44px 46px auto auto}
  .build-discovery-items{grid-template-columns:repeat(6,42px);gap:6px}
  .build-discovery-spells{grid-template-columns:repeat(2,40px)}
  .build-discovery-spells img{width:40px;height:40px}
}

@media (max-width:760px){.builds-pagination{overflow-x:auto}.build-page-size{display:none}.build-page-number{min-width:36px}.build-page-ellipsis{min-width:30px}}

/* V20 — account, profile collection, editor post flow */
.signed-out-auth{
  display:flex;
  align-items:center;
  gap:8px;
  height:48px;
}
.auth-provider{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(204,169,72,.34);
  border-radius:11px;
  background:linear-gradient(180deg,rgba(19,31,40,.94),rgba(7,17,25,.96));
  color:#d9c57f;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
  transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease;
}
.auth-provider svg{width:19px;height:19px}
.auth-provider:hover{
  transform:translateY(-1px);
  border-color:rgba(235,197,92,.7);
  color:#fff0af;
  background:linear-gradient(180deg,rgba(42,48,43,.98),rgba(17,25,28,.98));
}
.sign-in-tile{
  height:40px;
  min-width:92px;
  padding:0 18px;
  border:1px solid rgba(231,190,76,.68);
  border-radius:11px;
  background:linear-gradient(180deg,#6c551f,#3d2f13);
  color:#fff2bc;
  font-weight:900;
  letter-spacing:.025em;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,237,167,.14),0 7px 20px rgba(0,0,0,.2);
}
.sign-in-tile:hover{background:linear-gradient(180deg,#826724,#4c3a15);border-color:#efc85c}

.create-build-cta{min-width:142px;font-weight:850}

.profile-build-meta{
  align-self:stretch;
  display:flex;
  align-items:center;
  gap:13px;
}
.profile-build-likes{
  min-width:44px;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px!important;
  line-height:1;
}
.profile-build-likes b{
  font-size:31px!important;
  color:#ef5360!important;
  text-shadow:0 0 16px rgba(239,83,96,.25)!important;
  transform:translateY(1px);
}
.profile-build-likes span{
  color:#c4d0d9;
  font-size:10px;
  font-weight:900;
  line-height:1.1;
}
.profile-bookmark{
  min-width:64px;
  height:48px!important;
  padding:0 12px!important;
  border-radius:11px!important;
  justify-content:center;
  gap:7px!important;
  font-size:10px!important;
}
.profile-bookmark svg{width:23px!important;height:23px!important}
.profile-section-head h2{letter-spacing:-.01em}

.community-create-build{
  min-height:48px;
  padding:0 18px 0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:1px solid rgba(222,180,70,.66);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(79,62,21,.9),rgba(34,29,17,.96));
  color:#fff0b4;
  font:800 12px/1 inherit;
  letter-spacing:.015em;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,242,178,.1),0 10px 30px rgba(0,0,0,.18);
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.community-create-build b{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(238,201,99,.55);
  color:#f2cf69;
  font-size:17px;
  line-height:1;
}
.community-create-build:hover{transform:translateY(-1px);border-color:#e8c253;background:linear-gradient(180deg,rgba(102,79,25,.94),rgba(43,34,18,.98))}

.editor-mode .edit-toolbar{
  grid-template-columns:minmax(260px,1.35fr) minmax(150px,.55fr) minmax(175px,.62fr);
  margin-bottom:16px;
}
.editor-paired-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(310px,.72fr);
  gap:16px;
  align-items:stretch;
}
.editor-main-stack,.editor-side-stack{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.editor-main-stack .full-item-card,
.editor-side-stack .notes-card{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}
.editor-main-stack .full-item-card .card-body,
.editor-side-stack .notes-card .card-body{
  flex:1 1 auto;
}
.editor-side-stack .notes-card .note-page-shell{flex:1 1 auto;display:flex}
.editor-side-stack .notes-card .note-textarea{min-height:100%;height:auto;flex:1 1 auto}
.editor-mode .rune-card{margin-top:16px}
.post-build-zone{
  padding:34px 0 52px;
  display:flex;
  justify-content:center;
}
.post-build-button{
  min-width:250px;
  height:58px;
  padding:0 26px 0 30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  border:1px solid rgba(226,184,69,.75);
  border-radius:13px;
  background:linear-gradient(180deg,#69521c 0%,#3b2d12 100%);
  color:#fff2bb;
  font-size:14px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,245,191,.14),0 14px 36px rgba(0,0,0,.28),0 0 0 1px rgba(5,13,20,.8);
  transition:transform .15s ease,filter .15s ease,border-color .15s ease;
}
.post-build-button b{font-size:18px;color:#f5d66d;text-shadow:0 0 14px rgba(245,214,109,.28)}
.post-build-button:hover{transform:translateY(-2px);filter:brightness(1.1);border-color:#f0ca61}

@media(max-width:980px){
  .editor-paired-grid{grid-template-columns:1fr}
  .editor-main-stack .full-item-card,.editor-side-stack .notes-card{flex:auto}
  .editor-mode .edit-toolbar{grid-template-columns:1fr 1fr}
  .editor-mode .edit-toolbar .input{grid-column:1 / -1}
}
@media(max-width:680px){
  .signed-out-auth{gap:5px}
  .auth-provider{width:34px;height:34px;border-radius:9px}
  .sign-in-tile{height:36px;min-width:78px;padding:0 12px}
  .editor-mode .edit-toolbar{grid-template-columns:1fr}
  .editor-mode .edit-toolbar .input{grid-column:auto}
  .post-build-button{width:min(100%,320px)}
  .community-create-build{width:100%}
}

/* R21 image CTA artwork supplied by user */
.image-cta{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  line-height:0;
  cursor:pointer;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.2));
  transition:transform .16s ease,filter .16s ease;
}
.image-cta img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}
.image-cta:hover{
  transform:translateY(-2px);
  filter:brightness(1.08) drop-shadow(0 13px 25px rgba(0,0,0,.28));
}
.image-cta:active{transform:translateY(0) scale(.985)}
.image-cta:focus-visible{outline:2px solid #29c7e8;outline-offset:4px;border-radius:12px}

/* Main editor CTA: keep the source artwork wide and centered. */
.image-cta-post-build{width:min(100%,540px)}
.post-build-zone .image-cta-post-build{margin-inline:auto}

/* Champion discussion CTA: same placement as the old button, just image-based. */
.image-cta-create-champion{width:min(100%,420px)}

/* Compact button artwork for comment posts and My Builds Collection. */
.image-cta-post{width:112px;min-width:112px}
.image-cta-create-build{width:184px}

/* Let image CTAs sit cleanly inside comment composer layouts. */
.profile-comment-compose .image-cta-post,
.comment-compose .image-cta-post{align-self:center;flex:0 0 auto}

@media(max-width:680px){
  .image-cta-post-build{width:min(100%,420px)}
  .image-cta-create-champion{width:min(100%,360px)}
  .image-cta-create-build{width:164px}
  .image-cta-post{width:100px;min-width:100px}
}

/* V22 — corrected CTA crops, larger Builds discovery, Popular/Browse toggle */
.image-cta{overflow:visible;max-width:100%;}
.image-cta img{width:100%;height:auto;object-fit:contain;overflow:visible;}
.image-cta-post-build{width:min(100%,570px)}
.image-cta-create-champion{width:min(100%,470px)}
.image-cta-post{width:126px;min-width:126px}
.image-cta-create-build{width:205px}
.community-upload{max-width:100%;overflow:visible}
.post-build-zone{overflow:visible}
.profile-comment-compose,.comment-compose{overflow:visible}

.champions-heading .champion-browse-toggle{width:min(420px,44vw);height:54px;padding:3px}
.champion-browse-option{gap:10px;font-size:12.5px;letter-spacing:.005em}
.champion-browse-option svg{width:21px;height:21px;fill:none!important}
.champion-browse-option.active svg{color:#f0ca66;fill:none!important;filter:drop-shadow(0 0 8px rgba(240,202,102,.14))}

.builds-page-shell{padding-top:34px;max-width:1420px}
.builds-filter-bar{grid-template-columns:minmax(220px,1.35fr) repeat(3,minmax(175px,.8fr));gap:14px;padding:18px 20px;border-radius:18px;margin-bottom:18px}
.builds-filter-bar label>span{margin:0 0 9px 3px;font-size:10px;letter-spacing:.14em}
.build-filter-control select{height:50px;padding:0 42px 0 15px;border-radius:11px;font-size:13px}
.build-filter-control b{right:15px;font-size:16px}
.build-discovery-list{gap:12px}
.build-discovery-card{min-height:118px;grid-template-columns:86px minmax(235px,.82fr) minmax(610px,1.48fr);gap:18px;padding:16px 18px 16px 15px;border-radius:17px}
.build-discovery-champion{width:82px;height:82px;border-radius:14px;padding:4px}
.build-discovery-champion img{border-radius:9px}
.build-discovery-copy{gap:7px}
.build-discovery-champion-line{gap:8px;font-size:13px}
.build-discovery-champion-line strong{font-size:14px}
.build-discovery-champion-line span{font-size:12.5px}
.build-discovery-build-name{font-size:18px}
.build-discovery-loadout{grid-template-columns:58px 60px minmax(0,1fr) auto;gap:14px;padding-left:20px}
.build-discovery-role{width:54px;height:54px;border-radius:13px}
.build-discovery-role .role-position-icon{width:39px;height:39px}
.build-discovery-like{height:58px;gap:3px}
.build-discovery-like b{font-size:34px}
.build-discovery-like span{font-size:12px}
.build-discovery-items{grid-template-columns:repeat(6,minmax(48px,1fr));gap:9px}
.build-discovery-items img{max-width:60px;border-radius:10px}
.build-discovery-spells{grid-template-columns:repeat(2,50px);gap:8px}
.build-discovery-spells img{width:50px;height:50px;border-radius:10px}

@media(max-width:980px){
  .builds-filter-bar{grid-template-columns:1fr 1fr}
  .build-discovery-card{grid-template-columns:74px minmax(0,1fr)}
  .build-discovery-champion{width:70px;height:70px}
  .build-discovery-loadout{grid-column:1/-1;grid-template-columns:54px 58px minmax(0,1fr) auto;padding:12px 0 0}
  .build-discovery-items{grid-template-columns:repeat(6,52px)}
}
@media(max-width:680px){
  .image-cta-post-build{width:min(100%,440px)}
  .image-cta-create-champion{width:min(100%,380px)}
  .image-cta-create-build{width:178px}
  .image-cta-post{width:108px;min-width:108px}
  .champions-heading .champion-browse-toggle{width:100%;height:50px}
  .builds-page-shell{padding-top:24px}
  .builds-filter-bar{grid-template-columns:1fr;padding:14px}
  .build-discovery-card{grid-template-columns:58px minmax(0,1fr);padding:12px}
  .build-discovery-champion{width:56px;height:56px}
  .build-discovery-build-name{font-size:16px}
  .build-discovery-loadout{overflow-x:auto;grid-template-columns:48px 52px auto auto}
  .build-discovery-items{grid-template-columns:repeat(6,44px);gap:7px}
  .build-discovery-spells{grid-template-columns:repeat(2,42px)}
  .build-discovery-spells img{width:42px;height:42px}
}

/* V26 — subtle signed-out auth buttons, build-title icon, and no hover nudge on image CTAs */
.signed-out-auth{
  gap:10px;
  height:auto;
}
.auth-image-button,
.auth-sign-in-image{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  border-radius:0;
  cursor:pointer;
  line-height:0;
  filter:brightness(.92) saturate(.92) drop-shadow(0 10px 18px rgba(0,0,0,.22));
  transition:filter .16s ease, opacity .16s ease;
}
.auth-image-button img,
.auth-sign-in-image img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
}
.auth-image-button{
  width:42px;
  min-width:42px;
}
.auth-sign-in-image{
  width:170px;
  min-width:170px;
}
.auth-image-google,
.auth-sign-in-image{filter:brightness(.84) saturate(.86) drop-shadow(0 10px 18px rgba(0,0,0,.22));}
.auth-image-button:hover,
.auth-sign-in-image:hover,
.auth-image-button:focus-visible,
.auth-sign-in-image:focus-visible{
  filter:brightness(.98) saturate(.95) drop-shadow(0 12px 24px rgba(0,0,0,.28));
  outline:none;
}

.champion-build-title-button{
  align-items:center;
}
.champion-build-title-main{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:12px;
}
.champion-build-title-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(230,190,77,.14));
}
.champion-build-title-main strong{
  min-width:0;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:left;
}

.image-cta,
.image-cta:hover,
.image-cta:active,
.auth-provider,
.auth-provider:hover,
.sign-in-tile,
.sign-in-tile:hover{
  transform:none;
}
.image-cta{
  transition:filter .16s ease;
}
.image-cta:hover{
  filter:brightness(1.07) drop-shadow(0 13px 25px rgba(0,0,0,.28));
}
.image-cta:active{
  filter:brightness(1.02) drop-shadow(0 11px 22px rgba(0,0,0,.24));
}

@media(max-width:760px){
  .auth-image-button{width:38px;min-width:38px}
  .auth-sign-in-image{width:136px;min-width:136px}
  .champion-build-title-main{gap:10px}
  .champion-build-title-icon{width:20px;height:20px;flex-basis:20px}
}

/* V27 — wordmark logo, compact profile menu, larger hammer icon, stable profile button */
.brand{
  display:flex;
  align-items:center;
  min-width:0;
}
.brand-wordmark{
  display:block;
  width:265px;
  max-width:min(32vw,265px);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.18));
}
.brand-mark,
.brand-lb{display:none !important;}

.profile-button,
.profile-button:hover,
.profile-button:active,
.profile-button:focus-visible{
  transform:none !important;
}

.profile-menu{
  width:min(356px,calc(100vw - 18px)) !important;
  padding:10px 0 !important;
}
.profile-menu::before{
  margin:0 10px 4px !important;
}
.profile-menu button{
  min-height:66px !important;
  padding:10px 16px !important;
  gap:14px !important;
  align-items:center !important;
}
.profile-menu button > span:nth-child(2){
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
}
.profile-menu button strong{
  font-size:18px !important;
  line-height:1.05 !important;
  letter-spacing:.004em;
}
.profile-menu button small{display:none !important;}
.profile-menu-icon{
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  border-radius:10px !important;
  overflow:hidden;
  color:inherit !important;
}
.profile-menu-icon svg{display:none !important;}
.profile-menu-icon-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.18));
}
.profile-menu button:hover .profile-menu-icon,
.profile-menu button:hover .profile-menu-icon-image{
  transform:none !important;
}
.profile-menu-chevron{
  font-size:24px !important;
  color:#8ca3b5 !important;
}
.profile-menu button:hover .profile-menu-chevron{
  transform:none !important;
  color:#dce7ef !important;
}

.champion-build-title-main{gap:14px !important;}
.champion-build-title-icon{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
}

@media (max-width: 900px){
  .brand-wordmark{width:225px;max-width:40vw;}
}
@media (max-width: 640px){
  .brand-wordmark{width:176px;max-width:46vw;}
  .profile-menu{width:min(330px,calc(100vw - 14px)) !important;}
  .profile-menu button{min-height:60px !important;padding:9px 14px !important;}
  .profile-menu button strong{font-size:16px !important;}
  .profile-menu-icon{width:38px !important;height:38px !important;flex-basis:38px !important;}
  .champion-build-title-icon{width:26px !important;height:26px !important;flex-basis:26px !important;}
}

/* V28 — restore stable header geometry and hard-anchor profile dropdown */
.site-header{
  position:fixed !important;
  inset:0 0 auto 0 !important;
  height:76px !important;
  display:block !important;
  padding:0 !important;
}
.site-header .brand{
  position:absolute !important;
  left:clamp(18px,3vw,46px) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:auto !important;
  height:58px !important;
  display:flex !important;
  align-items:center !important;
  z-index:2;
}
.site-header .brand-wordmark{
  width:230px !important;
  max-width:27vw !important;
  height:56px !important;
  object-fit:contain !important;
  object-position:left center !important;
}
.site-header .top-nav{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:1;
}
.site-header .profile-wrap{
  position:absolute !important;
  right:clamp(18px,3vw,46px) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  justify-self:auto !important;
  z-index:4;
}
.site-header .profile-menu{
  position:absolute !important;
  top:calc(100% + 14px) !important;
  right:0 !important;
  left:auto !important;
  transform:none !important;
  transform-origin:top right !important;
  z-index:100 !important;
  animation:none !important;
}
.profile-button,
.profile-button:hover,
.profile-button:active,
.profile-button:focus-visible{
  transform:none !important;
}

@media(max-width:1050px){
  .site-header .brand-wordmark{width:190px !important;max-width:24vw !important;}
  .site-header .top-nav{gap:clamp(12px,2.2vw,28px) !important;}
}
@media(max-width:760px){
  .site-header .brand{left:12px !important;height:48px !important;}
  .site-header .brand-wordmark{width:150px !important;max-width:38vw !important;height:46px !important;}
  .site-header .profile-wrap{right:12px !important;}
  .site-header .top-nav{gap:10px !important;}
  .nav-link{font-size:10px !important;letter-spacing:.07em !important;}
}

/* V28 menu row layout — no legacy subtitle spacing */
.profile-menu button{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) 18px !important;
  column-gap:13px !important;
  position:relative !important;
}
.profile-menu button > span:nth-child(2){
  display:block !important;
  align-self:center !important;
}
.profile-menu button strong{
  display:block !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* V30 — exact reference wordmark + ornamental Home dividers */
.site-header .brand{
  height:76px !important;
  display:flex !important;
  align-items:center !important;
}
.site-header .brand-wordmark-reference{
  display:block !important;
  width:220px !important;
  max-width:26vw !important;
  height:auto !important;
  max-height:48px !important;
  object-fit:contain !important;
  object-position:left center !important;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.22)) !important;
}

.site-header .top-nav{
  gap:22px !important;
}
.home-nav-cluster{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  flex:0 0 auto;
}
.home-nav-divider{
  display:block;
  width:15px;
  height:46px;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  opacity:.92;
  filter:drop-shadow(0 0 4px rgba(201,145,47,.08));
}
.home-nav-link{
  flex:0 0 auto;
}

@media(max-width:1180px){
  .site-header .top-nav{gap:16px !important;}
  .home-nav-cluster{gap:16px;}
  .home-nav-divider{width:13px;height:40px;}
  .site-header .brand-wordmark-reference{width:190px !important;max-width:23vw !important;}
}
@media(max-width:880px){
  .home-nav-divider{display:none;}
  .home-nav-cluster{gap:0;}
  .site-header .top-nav{gap:12px !important;}
  .site-header .brand-wordmark-reference{width:160px !important;max-width:28vw !important;}
}
@media(max-width:680px){
  .site-header .brand{height:66px !important;}
  .site-header .brand-wordmark-reference{width:130px !important;max-width:30vw !important;max-height:34px !important;}
}


/* V31 — aligned centered nav, refreshed auth/profile art, and clean random tile */
.site-header .top-nav{
  gap:clamp(18px,2.1vw,30px) !important;
}
.site-header .home-nav-link{
  margin:0 !important;
}
.home-nav-cluster,
.home-nav-divider{display:none !important;}

.profile-button,
.profile-button:hover,
.profile-button:focus-visible,
.profile-button:active{
  width:44px !important;
  height:44px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  transform:none !important;
}
.profile-button svg{display:none !important;}
.profile-avatar-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.22));
}
.profile-wrap{min-height:44px; display:flex; align-items:center;}
.signed-out-auth{
  display:flex;
  align-items:center;
  gap:8px !important;
}
.auth-image-button,
.auth-sign-in-image{
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.22));
}
.auth-image-button{
  width:40px;
  min-width:40px;
}
.auth-sign-in-image{
  width:150px;
  min-width:150px;
}
.auth-image-button:hover,
.auth-sign-in-image:hover,
.auth-image-button:focus-visible,
.auth-sign-in-image:focus-visible{
  filter:brightness(1.02) drop-shadow(0 10px 18px rgba(0,0,0,.26));
}

.random-row{margin-top:16px;}
.random-button.random-button-image{
  position:relative;
  min-width:0;
  width:min(240px,52vw);
  height:auto;
  padding:0;
  border:0;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  overflow:visible;
  transform:none !important;
}
.random-button.random-button-image:hover,
.random-button.random-button-image:focus-visible,
.random-button.random-button-image:active{
  background:transparent;
  border:0;
  outline:none;
  transform:none !important;
}
.random-button-art{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.22));
}
.random-button-dice{
  position:absolute;
  left:31.5%;
  top:49.5%;
  width:15.5%;
  height:auto;
  transform:translate(-50%,-50%);
  transform-origin:center;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.18));
}

@media(max-width:760px){
  .auth-image-button{width:36px;min-width:36px;}
  .auth-sign-in-image{width:128px;min-width:128px;}
  .random-button.random-button-image{width:min(220px,64vw);}
  .profile-button{width:40px !important;height:40px !important;}
}


/* V32 — refined random button, cleaner avatar, exact Home centering */
.site-header .top-nav{
  display:grid !important;
  grid-template-columns:max-content max-content max-content !important;
  align-items:center !important;
  gap:clamp(18px,2vw,28px) !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
}
.site-header .nav-side{
  display:flex;
  align-items:center;
  gap:clamp(18px,2vw,28px);
  min-width:max-content;
}
.site-header .nav-side-left{justify-content:flex-end;}
.site-header .nav-side-right{justify-content:flex-start;}
.site-header .home-nav-link{justify-self:center;}

.profile-wrap{min-height:50px; display:flex; align-items:center;}
.profile-button,
.profile-button:hover,
.profile-button:focus-visible,
.profile-button:active{
  width:50px !important;
  height:50px !important;
}
.profile-avatar-image{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.18));
}

.random-button.random-button-image{
  width:min(196px,46vw);
  overflow:visible;
  background:transparent !important;
  box-shadow:none !important;
}
.random-button-art{
  width:100%;
  height:auto;
  display:block;
  background:transparent !important;
  filter:drop-shadow(0 7px 14px rgba(0,0,0,.18));
}
.random-button-dice{
  left:22.4%;
  top:49.6%;
  width:16.4%;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.16));
}
.random-button.rolling .random-button-dice{
  animation: diceRoll .46s linear;
}

@media(max-width:760px){
  .site-header .top-nav{gap:12px !important;}
  .site-header .nav-side{gap:12px !important;}
  .random-button.random-button-image{width:min(184px,56vw);}
  .profile-button,.profile-button:hover,.profile-button:focus-visible,.profile-button:active{width:44px !important;height:44px !important;}
}


/* V33 random button cleanup */
.random-button.random-button-image{
  width:min(176px,42vw) !important;
  position:relative;
  overflow:visible;
  background:transparent !important;
  box-shadow:none !important;
}
.random-button.random-button-image::before{
  content:"";
  position:absolute;
  left:8.5%;
  top:16%;
  width:24%;
  height:68%;
  border-radius:16px;
  background:radial-gradient(circle at 35% 35%, rgba(10,49,99,.35), rgba(4,21,46,.92) 62%, rgba(2,12,28,.98) 100%);
  box-shadow: inset 0 0 0 1px rgba(24,78,142,.08);
  pointer-events:none;
  z-index:1;
}
.random-button-art{
  width:100%;
  height:auto;
  display:block;
  background:transparent !important;
  filter:drop-shadow(0 7px 14px rgba(0,0,0,.18));
}
.random-button-dice{
  position:absolute;
  left:19%;
  top:50%;
  width:13%;
  height:auto;
  transform:translate(-50%,-50%);
  transform-origin:center;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.16));
  z-index:2;
}
.random-button.rolling .random-button-dice{
  animation: diceRoll .32s ease-in-out;
}
@keyframes diceRoll{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(180deg); }
}
@media(max-width:760px){
  .random-button.random-button-image{width:min(164px,52vw) !important;}
  .random-button.random-button-image::before{border-radius:14px;}
}


/* V34 — clearable search, single-dice random button, local role icons */
.search-icon.search-control{
  appearance:none;
  -webkit-appearance:none;
  display:grid;
  place-items:center;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  pointer-events:none;
  transition:color .16s ease, background .16s ease, transform .16s ease;
}
.search-icon.search-control:disabled{opacity:1;}
.search-icon.search-control.clear{
  pointer-events:auto;
  cursor:pointer;
  color:#b6c7d5;
  width:34px;
  height:34px;
  right:14px;
  border-radius:10px;
}
.search-icon.search-control.clear:hover{
  color:#f2f7fb;
  background:rgba(120,160,188,.10);
}
.search-icon.search-control svg{width:21px;height:21px;}

.random-button.random-button-image{
  width:158px !important;
  height:46px !important;
  min-width:0 !important;
  padding:0 17px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  border:1.5px solid #d5a63f !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#09213a 0%,#06172a 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(26,76,125,.30),0 8px 18px rgba(0,0,0,.18) !important;
  overflow:visible !important;
}
.random-button.random-button-image::before,
.random-button-art{display:none !important;}
.random-button-dice{
  position:static !important;
  width:29px !important;
  height:29px !important;
  object-fit:contain !important;
  transform:none !important;
  flex:0 0 29px !important;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.18)) !important;
  z-index:auto !important;
}
.random-button-label{
  color:#d7e0e8;
  font-size:16px;
  font-weight:750;
  letter-spacing:.01em;
  line-height:1;
}
.random-button.random-button-image:hover{
  border-color:#e1b750 !important;
  background:linear-gradient(180deg,#0b2743 0%,#071b30 100%) !important;
}
.random-button.rolling .random-button-dice{
  animation:diceTurn .26s ease-out forwards !important;
}
@keyframes diceTurn{
  from{transform:rotate(0deg);}
  to{transform:rotate(80deg);}
}

.role-position-icon{
  display:block !important;
  object-fit:contain !important;
  filter:none !important;
}
.profile-role-icon .role-position-icon{width:38px !important;height:38px !important;}
.profile-role-choice-icon .role-position-icon{width:48px !important;height:48px !important;}
.build-discovery-role .role-position-icon{width:34px !important;height:34px !important;}

@media(max-width:760px){
  .random-button.random-button-image{width:150px !important;height:44px !important;padding:0 15px !important;}
  .random-button-dice{width:27px !important;height:27px !important;flex-basis:27px !important;}
  .random-button-label{font-size:15px;}
}

/* V35 — auth onboarding + stable local role icons */
.auth-choice-modal,
.username-modal{
  width:min(560px,calc(100vw - 30px));
  border:1px solid rgba(91,158,207,.24);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(8,23,37,.99),rgba(4,13,24,.99));
  box-shadow:0 30px 90px rgba(0,0,0,.58);
  padding:24px;
}
.auth-choice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:22px;
}
.auth-choice{
  min-height:118px;
  border:1px solid rgba(217,173,70,.28);
  border-radius:16px;
  background:rgba(5,16,29,.78);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#eef5fa;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,filter .16s ease;
}
.auth-choice:hover{
  border-color:rgba(226,183,74,.62);
  background:rgba(10,27,44,.88);
}
.auth-choice img{width:58px;height:58px;object-fit:contain;}
.auth-choice strong{font-size:15px;}
.username-modal{width:min(520px,calc(100vw - 30px));}
.username-input{width:100%;margin-top:22px;height:54px;font-size:17px;}
.username-help{display:block;margin:9px 2px 0;color:#7f96aa;font-size:11px;}
.username-modal .profile-bio-actions{margin-top:24px;}
.role-position-icon{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto;
}
.profile-role-choice-icon .role-position-icon{width:52px;height:52px;margin:auto;}
.profile-role-icon .role-position-icon{width:32px;height:32px;}

@media(max-width:620px){
  .auth-choice-grid{grid-template-columns:1fr;}
  .auth-choice{min-height:92px;flex-direction:row;}
  .auth-choice img{width:46px;height:46px;}
}

/* V38 — League-style auth + username onboarding */
.league-auth-modal,
.league-username-modal{
  position:relative;
  overflow:visible;
  border:1px solid rgba(210,164,67,.72) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(18,64,96,.20), transparent 34%),
    linear-gradient(180deg, rgba(5,22,34,.995), rgba(3,13,23,.995)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(3,12,20,.92),
    0 34px 110px rgba(0,0,0,.72) !important;
}
.league-auth-modal{
  width:min(860px,calc(100vw - 34px)) !important;
  padding:78px 48px 50px !important;
  border-radius:30px !important;
}
.league-username-modal{
  width:min(760px,calc(100vw - 34px)) !important;
  padding:86px 44px 46px !important;
  border-radius:28px !important;
  max-height:none !important;
}
.league-modal-crest{
  position:absolute;
  top:-45px;
  left:50%;
  width:88px;
  height:88px;
  transform:translateX(-50%);
  pointer-events:none;
}
.league-modal-crest::before,
.league-modal-crest::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.league-modal-crest::before{
  top:10px;
  width:48px;
  height:64px;
  clip-path:polygon(50% 0,100% 38%,68% 38%,68% 100%,50% 82%,32% 100%,32% 38%,0 38%);
  background:linear-gradient(90deg,#9a651c,#f1ce77 44%,#fff1b3 50%,#d99b34 58%,#7c4d13);
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.45));
}
.league-modal-crest::after{
  top:0;
  width:82px;
  height:82px;
  clip-path:polygon(50% 0,88% 31%,75% 31%,75% 69%,50% 100%,25% 69%,25% 31%,12% 31%);
  border:1px solid rgba(219,172,70,.28);
}
.league-auth-modal h3,
.league-username-modal h3{
  margin:0;
  text-align:center;
  color:#f7f2e6;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:700;
  letter-spacing:.01em;
  text-shadow:0 2px 2px rgba(0,0,0,.45);
}
.league-auth-modal h3{font-size:clamp(34px,4.1vw,54px);}
.league-username-modal h3{font-size:clamp(32px,3.8vw,49px);}
.league-modal-divider{
  display:grid;
  grid-template-columns:1fr 20px 1fr;
  align-items:center;
  gap:14px;
  margin:30px 8px 34px;
}
.league-modal-divider span{
  display:block;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(198,145,49,.72));
}
.league-modal-divider span:last-child{transform:scaleX(-1);}
.league-modal-divider i{
  display:block;
  width:14px;
  height:14px;
  border:2px solid rgba(211,161,62,.82);
  transform:rotate(45deg);
  box-shadow:inset 0 0 0 3px rgba(5,18,29,.95);
}
.league-modal-close{
  position:absolute;
  right:34px;
  top:72px;
  width:50px;
  height:50px;
  border-radius:14px;
  border:1px solid rgba(218,163,57,.9);
  background:rgba(6,20,31,.92);
  color:#f4d37a;
  font-size:32px;
  line-height:1;
  cursor:pointer;
}
.league-modal-close:hover{background:rgba(14,38,56,.96);}
.league-auth-modal .auth-choice-grid{
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin:0;
}
.league-auth-modal .auth-choice{
  min-height:214px;
  padding:26px 20px;
  border-radius:22px;
  border:2px solid rgba(219,169,66,.9);
  background:linear-gradient(180deg,rgba(8,32,49,.94),rgba(4,20,34,.96));
  gap:22px;
  box-shadow:inset 0 0 30px rgba(23,92,138,.08);
}
.league-auth-modal .auth-choice:hover{
  border-color:rgba(239,193,90,.98);
  background:linear-gradient(180deg,rgba(11,40,60,.98),rgba(5,25,40,.98));
}
.auth-choice-icon{
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  border-radius:20px;
  border:2px solid rgba(222,171,63,.92);
  background:rgba(4,16,28,.76);
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.league-auth-modal .auth-choice img{
  width:72px !important;
  height:72px !important;
  object-fit:contain;
}
.league-auth-modal .auth-choice strong{
  font-size:clamp(18px,2vw,24px) !important;
  letter-spacing:-.015em;
}
.league-username-modal .username-input{
  height:74px;
  margin:0;
  border:2px solid rgba(218,170,70,.92);
  border-radius:14px;
  background:rgba(4,16,28,.88);
  padding:0 26px;
  font-size:clamp(20px,2.4vw,30px);
  color:#f4f7f8;
  box-shadow:inset 0 0 24px rgba(14,63,94,.12),0 0 0 4px rgba(1,8,15,.45);
}
.league-username-modal .username-input:focus{
  border-color:#e1b75c;
  box-shadow:inset 0 0 24px rgba(14,63,94,.16),0 0 0 4px rgba(210,161,62,.08);
}
.league-username-modal .username-help{
  margin:16px 4px 0;
  font-size:15px;
  color:#8fa3b5;
}
.modal-inline-error{
  min-height:22px;
  margin:10px 4px 0;
  color:#ef9a9a;
  font-size:13px;
}
.username-actions{
  grid-template-columns:minmax(190px,1fr) minmax(190px,1fr) !important;
  gap:24px !important;
  margin-top:18px !important;
}
.username-actions .btn{
  height:66px !important;
  border-radius:12px !important;
  font-family:Georgia,'Times New Roman',serif;
  font-size:22px !important;
  font-weight:700;
}
.username-actions .btn.ghost{
  border:1px solid rgba(195,145,56,.72);
  color:#93a4b3;
  background:rgba(3,14,24,.82);
}
.username-actions .btn.primary{
  border:2px solid rgba(233,190,83,.92);
  color:#f3ce71;
  background:linear-gradient(180deg,#17436b,#0b2945);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.05),0 0 22px rgba(41,142,210,.12);
}

@media(max-width:680px){
  .league-auth-modal{padding:72px 18px 26px !important;}
  .league-username-modal{padding:74px 18px 28px !important;}
  .league-auth-modal .auth-choice-grid{grid-template-columns:1fr;gap:14px;}
  .league-auth-modal .auth-choice{min-height:112px;flex-direction:row;justify-content:flex-start;padding:14px 18px;}
  .auth-choice-icon{width:68px;height:68px;flex:0 0 68px;}
  .league-auth-modal .auth-choice img{width:52px !important;height:52px !important;}
  .league-modal-close{right:18px;top:58px;width:42px;height:42px;font-size:26px;}
  .username-actions{grid-template-columns:1fr !important;gap:10px !important;}
}

/* V39 — compact auth onboarding, provider avatars, bio polish, editor CTA sizing */
.league-modal-crest{display:none !important;}
.league-auth-modal{
  width:min(690px,calc(100vw - 28px)) !important;
  padding:44px 30px 30px !important;
  border-radius:24px !important;
}
.league-username-modal{
  width:min(640px,calc(100vw - 28px)) !important;
  padding:48px 34px 32px !important;
  border-radius:24px !important;
}
.league-auth-modal h3{font-size:clamp(30px,3.4vw,42px) !important;}
.league-username-modal h3{font-size:clamp(29px,3.2vw,40px) !important;}
.league-modal-divider{margin:22px 6px 26px !important;}
.league-modal-close{
  right:18px !important;
  top:18px !important;
  width:42px !important;
  height:42px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  line-height:1 !important;
  font-size:28px !important;
}
.league-auth-modal .auth-choice-grid{gap:16px !important;}
.league-auth-modal .auth-choice{
  min-height:154px !important;
  padding:20px 18px !important;
  gap:14px !important;
  border-radius:18px !important;
}
.auth-choice-icon{width:70px !important;height:70px !important;border-radius:16px !important;}
.league-auth-modal .auth-choice img{width:56px !important;height:56px !important;}
.league-auth-modal .auth-choice strong{font-size:clamp(16px,1.6vw,20px) !important;}
.league-username-modal .username-input{height:62px !important;font-size:clamp(19px,2vw,25px) !important;}
.league-username-modal .username-help{font-size:13px !important;}
.username-actions{gap:16px !important;grid-template-columns:minmax(160px,1fr) minmax(160px,1fr) !important;}

.profile-avatar-large{overflow:hidden;}
.profile-provider-avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
.profile-bio-panel{
  position:relative;
  margin-top:16px;
  min-height:94px;
  padding:18px 18px 28px;
  border:1px solid rgba(205,169,79,.26);
  border-radius:15px;
  background:linear-gradient(180deg,rgba(7,24,38,.78),rgba(4,15,25,.72));
  box-shadow:inset 0 0 24px rgba(24,92,132,.05);
}
.profile-bio-panel.empty{border-style:dashed;}
.profile-bio-panel .profile-bio{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:#cbd7df;line-height:1.55;}
.profile-bio-panel.empty .profile-bio{color:#71899c;font-style:italic;}
.profile-bio-limit,
.profile-bio-counter{
  position:absolute;
  right:12px;
  bottom:9px;
  color:#71899c;
  font-size:10px;
  letter-spacing:.06em;
}
.profile-bio-editor-shell{position:relative;}
.profile-bio-editor{padding-bottom:34px !important;min-height:132px !important;}

.image-cta-post-build{width:min(100%,285px) !important;}
.post-build-zone{padding-top:28px !important;padding-bottom:32px !important;}

@media(max-width:700px){
  .league-auth-modal{padding:36px 16px 22px !important;}
  .league-username-modal{padding:38px 18px 24px !important;}
  .league-auth-modal .auth-choice-grid{grid-template-columns:1fr !important;}
  .league-auth-modal .auth-choice{min-height:92px !important;flex-direction:row !important;justify-content:flex-start !important;padding:12px 16px !important;}
  .auth-choice-icon{width:58px !important;height:58px !important;}
  .league-auth-modal .auth-choice img{width:46px !important;height:46px !important;}
  .league-modal-close{right:12px !important;top:12px !important;width:38px !important;height:38px !important;font-size:24px !important;}
  .username-actions{grid-template-columns:1fr 1fr !important;}
  .image-cta-post-build{width:min(100%,240px) !important;}
}


/* V40 rune/profile/editor stability */
.profile-name-line h1{font-size:clamp(30px,3.4vw,44px) !important;}
.profile-bio-panel{padding-bottom:18px !important;}
.profile-bio-limit,.profile-bio-counter{display:none !important;}
.profile-bio-editor{padding-bottom:18px !important;}
.profile-empty-value{display:block;min-height:24px;min-width:72px;}

.rune-choice img,
.rune-path-crest img,
.rune-path-big-icon img,
.rune-path-samples img,
.rune-stat-choice img{
  object-fit:contain;
  display:block;
  color:transparent;
}
.rune-choice{overflow:hidden;}
.rune-choice img{flex:0 0 auto;}

.editor-main-stack,.editor-side-stack{position:relative;isolation:isolate;}
.editor-main-stack>.build-card,.editor-side-stack>.build-card{position:relative;z-index:1;flex-shrink:0;margin-top:0 !important;}
.editor-main-stack>.full-item-card{flex:1 0 auto;z-index:1;}
.editor-main-stack>.starter-items-card{z-index:2;}
.full-item-card{clear:both;}

@media(max-width:700px){.profile-name-line h1{font-size:clamp(28px,8vw,38px) !important;}}