.faction-group-head{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
}

.faction-group-title{
  margin:0;
  font-size:18px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  opacity:0.9;
}

.faction-grid-4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:18px;
}

@media (max-width: 1100px){
  .faction-grid-4{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .faction-grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .faction-grid-4{ grid-template-columns: 1fr; }
}

.faction-card{
  --faction-card-glow: rgba(199, 167, 109, 0.16);
  --faction-card-border-green: rgba(199, 167, 109, 0.34);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-decoration:none;
  border:1px solid var(--faction-card-border-green);
  background:
    radial-gradient(circle at 12% -18%, var(--faction-card-glow), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
    var(--faction-card-bg);
  border-radius:16px;
  padding:14px 12px;
  min-height: 272px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.faction-card:hover{
  transform: translateY(-2px);
  border-color: rgba(215, 184, 124, 0.52);
  background:
    radial-gradient(circle at 12% -18%, var(--faction-card-glow), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    var(--faction-card-bg);
  box-shadow: 0 5px 9px rgba(0,0,0,0.12);
}

.faction-card-art{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  height: 186px;
  padding: 6px 0;
  flex: 0 0 auto;
}

.faction-card-art img{
  width: 100%;
  max-width: 190px;
  max-height: 168px;
  height: 100%;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
}

.faction-card-fallback{
  width: 160px;
  height: 160px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  border:1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
}

.faction-card-name{
  width:100%;
  text-align:center;
  font-weight:600;
  opacity:0.95;
  color: #E7ECFF;
  margin-top:auto;
  padding-top:8px;

  line-height:1.2;
  min-height: calc(1.2em * 2);

  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

.champ-search-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.champ-search-card.is-hidden{
  display:none !important;
}

.page-control-bar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}

.page-control-left{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.page-control-title{
  margin:0;
}

.page-control-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.page-control-buttons{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.page-crumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#c9d6ea;
}

.page-crumb a{
  color:#f1dfb1;
  text-decoration:none;
}

.page-crumb a:hover{
  text-decoration:underline;
}

.page-control-icon{
  border:1px solid rgba(199,167,109,0.48);
  background: linear-gradient(180deg, rgba(199,167,109,0.34), rgba(199,167,109,0.08));
  color:#f7e9c4;
  border-radius:999px;
  text-decoration:none;
  padding:7px 12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.page-control-icon--search{
  width:34px;
  height:34px;
  padding:0;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  letter-spacing:0;
  text-transform:none;
}

.page-control-icon-svg{
  width:15px;
  height:15px;
  display:block;
}

.page-control-icon.is-disabled{
  opacity:0.45;
  cursor:not-allowed;
}

.champ-search-title{
  margin:0;
}

.champ-search-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.champ-search-head-controls{
  display:flex;
  align-items:center;
  gap:6px;
}

.champ-inline-control{
  min-width:32px;
  height:30px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(199,167,109,0.48);
  background:linear-gradient(180deg, rgba(199,167,109,0.34), rgba(199,167,109,0.08));
  color:#f7e9c4;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}

.champ-inline-control:hover{
  background:linear-gradient(180deg, rgba(215,184,124,0.45), rgba(199,167,109,0.14));
}

.champ-search-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.champ-search-primary{
  display:flex;
  align-items:stretch;
}

.champ-search-input-wrap{
  position:relative;
  width:100%;
}

.champ-search-input{
  padding-right: 255px;
}

.champ-search-input-actions{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:6px;
}

.champ-search-input,
.champ-search-advanced input:not([type="checkbox"]):not([type="radio"]),
.champ-search-advanced select{
  width:100%;
  min-height:40px;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:10px;
  background:rgba(0,0,0,0.2);
  color:#E7ECFF;
  padding:8px 10px;
}

.rv-single{
  position:relative;
}

.rv-single-trigger{
  width:100%;
  min-height:40px;
  border:1px solid rgba(199,167,109,0.46);
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)),
    radial-gradient(circle at top right, rgba(199,167,109,0.18), rgba(199,167,109,0) 55%),
    rgba(10,14,26,0.8);
  color:#f2e2b9;
  padding:8px 38px 8px 12px;
  text-align:left;
  cursor:pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 4px 14px rgba(0,0,0,0.32);
}

.rv-single-trigger::after{
  content:'';
  position:absolute;
  right:14px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid #e6d4a2;
  border-bottom:2px solid #e6d4a2;
  transform:translateY(-70%) rotate(45deg);
}

.rv-single.is-open .rv-single-trigger{
  border-color:rgba(241,213,131,0.85);
  box-shadow:0 0 0 2px rgba(241,213,131,0.24), inset 0 0 0 1px rgba(255,255,255,0.06);
}

.rv-single.is-disabled{
  opacity:0.55;
}

.rv-single.is-disabled .rv-single-trigger{
  cursor:not-allowed;
}

.rv-single-menu{
  display:none;
  position:absolute;
  z-index:20;
  top:calc(100% + 6px);
  left:0;
  right:0;
  max-height:240px;
  overflow:auto;
  padding:6px;
  border:1px solid rgba(199,167,109,0.42);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(17,22,38,0.98), rgba(7,10,18,0.98));
  box-shadow:0 14px 34px rgba(0,0,0,0.52);
}

.rv-single.is-open .rv-single-menu{
  display:block;
}

.rv-single-menu{
  scrollbar-width: thin;
  scrollbar-color: rgba(199,167,109,0.72) rgba(8,11,20,0.9);
}

.rv-single-menu::-webkit-scrollbar{
  width: 12px;
}

.rv-single-menu::-webkit-scrollbar-track{
  background: linear-gradient(180deg, rgba(8,11,20,0.95), rgba(20,26,42,0.9));
  border-left: 1px solid rgba(255,255,255,0.04);
}

.rv-single-menu::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(241,213,131,0.86), rgba(199,167,109,0.66));
  border: 2px solid rgba(8,11,20,0.95);
  border-radius: 999px;
}

.rv-single-menu::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(255,226,145,0.95), rgba(223,188,113,0.82));
}

.rv-single-option{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  color:#dfe7ff;
  text-align:left;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
}

.rv-single-option:hover{
  background:rgba(255,255,255,0.08);
}

.rv-single-option.is-selected{
  background:linear-gradient(90deg, rgba(199,167,109,0.42), rgba(199,167,109,0.12));
  color:#f7eac5;
}

.rv-effect-line{
  grid-column:1 / -1;
  border:1px solid rgba(199,167,109,0.36);
  border-radius:0;
  background:rgba(7,10,18,0.78);
  padding:10px;
}

.rv-effect-line-title{
  display:block;
  font-weight:700;
  margin-bottom:8px;
  color:#f1dfb1;
}

.rv-effect-picked{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-height:34px;
  margin-bottom:10px;
  border:1px dashed rgba(199,167,109,0.35);
  padding:8px;
}

.rv-effect-picked.is-pulse{
  animation: rvEffectPulse 420ms ease-out;
}

.rv-effect-pill{
  border:1px solid rgba(199,167,109,0.46);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)),
    radial-gradient(circle at top right, rgba(199,167,109,0.18), rgba(199,167,109,0) 55%),
    rgba(10,14,26,0.8);
  color:#f2e2b9;
  padding:5px 10px;
  border-radius:999px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 4px 14px rgba(0,0,0,0.32);
}

.rv-effect-pill img{
  width:18px;
  height:18px;
  border-radius:4px;
}

.rv-effect-pill-x{
  font-weight:700;
  opacity:0.9;
}

.rv-effect-columns{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.rv-effect-col{
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
  padding:8px;
}

.rv-effect-col-title{
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#f1dfb1;
  margin-bottom:8px;
}

.rv-effect-list{
  max-height:none;
  overflow:visible;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.rv-effect-option{
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
  color:#f2e2b9;
  padding:5px 8px;
  display:inline-flex;
  align-items:center;
  gap:3px;
  text-align:left;
  cursor:pointer;
  border-radius:999px;
}

.rv-effect-option img{
  width:18px;
  height:18px;
  border-radius:4px;
}

.rv-effect-chip{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  font-size:11px;
  font-weight:700;
}

.rv-effect-chip.buff{
  background:rgba(83,191,132,0.24);
  color:#bdf3d4;
}

.rv-effect-chip.debuff{
  background:rgba(217,82,82,0.24);
  color:#ffd2d2;
}

.rv-effect-option:hover{
  background:rgba(255,255,255,0.08);
}

.rv-effect-option.is-selected{
  opacity:0.45;
}

.skill-effect-token{
  color:#f2e2b9;
}

[data-champ-search-effects] .skill-effect-token{
  color:#7be7ff;
}

[data-champ-search-effects] .rv-effect-pill.skill-effect-token,
[data-champ-search-effects] .rv-effect-option.skill-effect-token.is-selected{
  color:#f2e2b9;
}

[data-relics-search-effects] .skill-effect-token{
  color:#7be7ff;
}

[data-relics-search-effects] .rv-effect-pill.skill-effect-token,
[data-relics-search-effects] .rv-effect-option.skill-effect-token.is-selected{
  color:#f2e2b9;
}

[data-gemstones-search-effects] .skill-effect-token{
  color:#7be7ff;
}

[data-gemstones-search-effects] .rv-effect-pill.skill-effect-token,
[data-gemstones-search-effects] .rv-effect-option.skill-effect-token.is-selected{
  color:#f2e2b9;
}

@keyframes rvEffectPulse{
  0% { box-shadow: 0 0 0 0 rgba(241,213,131,0.65); }
  100% { box-shadow: 0 0 0 14px rgba(241,213,131,0); }
}

.btn.btn-ghost{
  border:1px solid rgba(199,167,109,0.48);
  background:linear-gradient(180deg, rgba(199,167,109,0.22), rgba(199,167,109,0.08));
  color:#f7e9c4;
}

.btn.btn-inside{
  min-height:30px;
  padding:5px 10px;
  border-radius:8px;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  border:1px solid rgba(199,167,109,0.56);
  background:linear-gradient(180deg, rgba(199,167,109,0.36), rgba(199,167,109,0.12));
  color:#f7e9c4;
}

.btn.btn-inside:hover,
.btn.btn-ghost:hover{
  background:linear-gradient(180deg, rgba(215,184,124,0.48), rgba(199,167,109,0.16));
}

.champ-search-details{
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:8px 10px;
  background:rgba(255,255,255,0.02);
  display:none;
}

.champ-search-details.is-open{
  display:block;
}

.champ-search-advanced{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.champ-search-advanced label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.champ-search-check{
  grid-column:1 / -1;
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:8px;
}

.champ-search-check input[type="checkbox"]{
  width:18px;
  height:18px;
}

.relic-check-pill.is-locked{
  cursor:not-allowed;
  opacity:0.86;
}

.relic-check-pill.is-locked:hover{
  transform:none;
}

.relic-check-pill.is-locked input[type="checkbox"]{
  pointer-events:none;
}

.scope-lock-wrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
  position:relative;
}

.scope-lock-help{
  position:relative;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(123, 231, 255, 0.35);
  background:rgba(8, 14, 28, 0.8);
  color:#7be7ff;
  font-size:11px;
  font-weight:700;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:help;
  padding:0;
}

.scope-lock-help:focus-visible{
  outline:1px solid rgba(123, 231, 255, 0.5);
  outline-offset:2px;
}

.scope-lock-tooltip{
  position:absolute;
  left:50%;
  top:calc(100% + 8px);
  transform:translateX(-50%) translateY(-4px);
  width:min(300px, 80vw);
  border-radius:12px;
  border:1px solid rgba(123, 231, 255, 0.42);
  background:
    radial-gradient(circle at 12% -10%, rgba(140, 104, 228, 0.28), transparent 50%),
    linear-gradient(180deg, rgba(8, 14, 28, 0.98), rgba(7, 11, 22, 0.98));
  box-shadow:none;
  padding:10px 11px;
  z-index:10;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease, visibility .12s ease;
  backdrop-filter:blur(2px);
  color:rgba(231, 236, 255, 0.93);
  font-size:13px;
  line-height:1.45;
  text-align:left;
}

.scope-lock-help:hover .scope-lock-tooltip,
.scope-lock-help:focus-visible .scope-lock-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.champ-search-actions{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:12px;
}

.champ-search-actions .btn{
  text-decoration:none;
}

.champ-search-actions .btn.btn-inside{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.champ-search-actions .btn:hover{
  background:linear-gradient(180deg, rgba(215,184,124,0.48), rgba(199,167,109,0.16));
}

.champ-results-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.champ-results-head-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.champ-results-dismiss{
  min-height:30px;
  padding:5px 10px;
  border-radius:8px;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  border:1px solid rgba(199,167,109,0.56);
  background:linear-gradient(180deg, rgba(199,167,109,0.36), rgba(199,167,109,0.12));
  color:#f7e9c4;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  cursor:pointer;
}

.champ-results-dismiss:hover{
  background:linear-gradient(180deg, rgba(215,184,124,0.48), rgba(199,167,109,0.16));
}

.champ-pagination{
  margin-top:14px;
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
}

.champ-pagination .btn{
  text-decoration:none;
  line-height:1.4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.champ-pagination-current{
  color:#f1dfb1;
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

@media (max-width: 820px){
  .page-control-right{
    width:100%;
    align-items:flex-start;
  }

  .page-control-buttons{
    justify-content:flex-start;
  }

  .page-crumb{
    flex-wrap:wrap;
  }

  .champ-search-head{
    flex-wrap:wrap;
  }

  .champ-search-advanced{
    grid-template-columns:1fr;
  }

  .rv-effect-columns{
    grid-template-columns:1fr;
  }

  .champ-search-input{
    padding-right: 12px;
  }

  .champ-search-input-actions{
    position:static;
    transform:none;
    margin-top:8px;
    justify-content:flex-end;
  }
}

/* Champions pages default text color rollout (non-rarity text only). */
.page-control-title,
.faction-group-title,
.champ-search-title,
.champ-search-advanced > label > span,
.champ-results-head h3,
.champ-pagination-current{
  color: var(--text-global-primary);
}