/* ========== Rift Pulse Dark Theme ========== */
:root{
  --bg: #0a0d14;
  --panel: rgba(15, 19, 29, 0.65);
  --panel-2: rgba(15, 19, 29, 0.55);
  --border: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.12);

  --text: #e7eaf0;
  --muted: rgba(231,234,240,0.68);
  --muted-2: rgba(231,234,240,0.50);

  --accent: #58a6ff;
  --accent-2: #56d6ff;

  --success: #34d399;
  --danger: #fb7185;
  --warning: #fbbf24;

  --shadow: 0 12px 28px rgba(0,0,0,0.45);
  --radius: 14px;
  --radius-sm: 10px;
  --pad: 14px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html, body {
  background: transparent;
  color: var(--text);
}
body{
  margin:0;
  font-family: var(--font);
}

html{ background: #0a0d14; }

/* Global background image + dark overlay on html */
html::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1100px 700px at 70% 10%, rgba(88,166,255,0.16), transparent 60%),
    radial-gradient(900px 600px at 20% 20%, rgba(86,214,255,0.10), transparent 55%),
    linear-gradient(to bottom, rgba(8,10,16,0.88), rgba(8,10,16,0.92)),
    url("/static/img/bg-rift.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.85) brightness(0.65) blur(0.5px);
}

/* Subtle grain to make panels feel less flat */
html::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.18;
  pointer-events:none;
}

a { color: var(--text); text-decoration:none; }
a:hover{ color: var(--accent); }

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 16px 48px;
}

.page-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  margin: 18px 0 12px;
}
.page-title{
  font-size: 28px;
  letter-spacing: 0.2px;
  margin:0;
}
.page-subtitle{
  margin:6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

h1, h2, h3, h4, h5, h6,
.page-title, .page-subtitle, .eyebrow,
.card-title, .card-subtitle,
.table thead th {
  cursor: default;
  user-select: none;
}

/* Table headers should feel clickable */
table thead th,
.table thead th,
th {
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

table thead th:hover,
.table thead th:hover {
  background: rgba(255,255,255,0.08) !important;
  color: var(--text) !important;
}

table thead th * {
  cursor: pointer !important;
}

/* Show pointer on clickable elements */
.nav-link, .navbar .brand, a, button, [role="button"], th.sortable {
  cursor: pointer;
}

/* Navbar */
.navbar{
  position: sticky;
  top:0;
  z-index:50;
  border-bottom: 1px solid var(--border);
  background: rgba(10,13,20,0.55);
  backdrop-filter: blur(10px);
}
.navbar-inner{
  max-width:1200px;
  margin:0 auto;
  padding: 10px 16px;
  display:flex;
  align-items:center;
  gap: 14px;
}
.brand{
  position: relative;
  width: 48px;
  height: 48px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow: visible;
}
.brand img{
  position: absolute;
  left: -150px;
  top: 50%;
  width: 78px;
  height: 78px;
  transform: translateY(-50%) translateY(15px) scaleX(1.3) scale(3);
  transform-origin: left center;
}
.nav-links{
  display:flex;
  gap: 10px;
  margin-left: 8px;
}
.nav-link{
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 10px;
}
.nav-link:hover{
  color: var(--text);
  background: rgba(255,255,255,0.06);
}
.nav-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Panels/Cards */
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card .card-body{ padding: var(--pad); }
.card + .card{ margin-top: 12px; }

.kpi-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.kpi{
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-width: 180px;
}
.kpi .label{ color: var(--muted); font-size: 12px; }
.kpi .value{ font-size: 18px; margin-top: 4px; }

/* Inputs */
.input, .select{
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-2);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  outline:none;
}
.input::placeholder{ color: rgba(231,234,240,0.45); }
.input:focus, .select:focus{
  border-color: rgba(88,166,255,0.55);
  box-shadow: 0 0 0 4px rgba(88,166,255,0.16);
}

.form-row{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.form-row > *{ flex: 1 1 180px; }
.form-actions{ display:flex; gap:10px; align-items:center; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor:pointer;
}
.btn:hover{ background: rgba(255,255,255,0.10); }
.btn-primary{
  border-color: rgba(88,166,255,0.35);
  background: linear-gradient(90deg, rgba(88,166,255,0.35), rgba(86,214,255,0.22));
}
.btn-primary:hover{
  background: linear-gradient(90deg, rgba(88,166,255,0.45), rgba(86,214,255,0.30));
}

/* Tables */
.table-wrap{ overflow-x:auto; border-radius: var(--radius); }
table{
  width:100%;
  border-collapse: collapse;
  min-width: 900px;
}
th, td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
th{
  text-align:center;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  position: sticky;
  top: 0; /* works inside scroll container */
}

/* Sortable-like table header UX */
thead th, thead th *{ cursor: pointer !important; user-select: none !important; }
thead th:hover{ background: rgba(255,255,255,0.06) !important; color: var(--text) !important; }

tr:hover td{ background: rgba(255,255,255,0.04); }

.champ-icon {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 8px;
  vertical-align: middle;
  display: inline-block;
}

.summary-icon {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  margin-right: 14px;
}

/* Chips/badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  font-size: 12px;
  color: var(--muted);
}
.badge.win{ border-color: rgba(52,211,153,0.35); color: rgba(52,211,153,0.95); }
.badge.loss{ border-color: rgba(251,113,133,0.35); color: rgba(251,113,133,0.95); }

/* Horizontal scrollers (items/runes etc.) */
.hscroll{
  display:flex;
  gap: 10px;
  overflow-x:auto;
  padding: 6px 2px 10px;
}
.hscroll::-webkit-scrollbar{ height: 10px; }
.hscroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
}
.item-card{
  flex: 0 0 auto;
  width: 128px;
  background: rgba(15,19,29,0.65);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
}
.item-card:hover{ border-color: rgba(88,166,255,0.32); }
.item-icon{ width: 36px; height: 36px; border-radius: 8px; }
.item-name{ margin-top: 6px; font-size: 12px; color: var(--text); max-height: 2.4em; overflow: hidden; }
.item-meta{ margin-top: 6px; display:flex; justify-content:space-between; font-size: 12px; color: var(--muted); }

/* Flash messages */
.flash{
  border: 1px solid var(--border);
  background: rgba(15,19,29,0.65);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 12px 0;
}
.flash.success{ border-color: rgba(52,211,153,0.28); }
.flash.error{ border-color: rgba(251,113,133,0.28); }

.small{ color: var(--muted); font-size: 12px; }

/* Responsive */
@media (max-width: 860px){
  .page-title{ font-size: 22px; }
  .nav-links{ display:none; } /* keep it simple; optional mobile menu later */
}

/* ====== Emergency clamps to prevent huge images + force dark theme ====== */

/* Force dark backdrop no matter what other CSS does */
html, body {
  background: transparent !important;
  color: var(--text) !important;
}

html {
  background: #0a0d14 !important;
}

/* Make sure the background layers are visible and not covered */
html::before, html::after {
  pointer-events: none !important;
}

/* Clamp ALL images by default */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* Common icon sizes */
.icon-18 { width: 18px !important; height: 18px !important; }
.icon-22 { width: 22px !important; height: 22px !important; }
.icon-26 { width: 26px !important; height: 26px !important; }
.icon-32 { width: 32px !important; height: 32px !important; }
.icon-48 { width: 48px !important; height: 48px !important; }

/* Specific controls: rank/role buttons + champ icons */
.filter-icon img,
.rank-icon,
.role-icon {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
}
.role-icon img { background: transparent !important; border: none !important; }

.filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(15,19,29,0.65) !important;
  border: 1px solid var(--border);
  color: var(--text);
}

.filter-icon.selected {
  background: rgba(88,166,255,0.10) !important;
  border-color: rgba(88,166,255,0.35);
  box-shadow: 0 0 0 4px rgba(88,166,255,0.18);
}

.filter-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(88,166,255,0.22);
}

/* Shrink rank dropdown pill */
.rank-dropdown {
  position: relative;
}

.rank-dropdown summary.filter-pill {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(15,19,29,0.65);
  cursor: pointer;
  min-width: 140px;
}

.rank-dropdown summary.filter-pill::-webkit-details-marker { display: none; }


.rank-dropdown summary.filter-pill img {
  width: 60px;
  height: 60px;
}

.rank-dropdown summary .pill-label { font-size: 14px; }

.rank-dropdown .filter-menu {
  position: absolute;
  z-index: 20;
  margin-top: 8px;
  padding: 10px;
  background: rgba(15,19,29,0.95);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.rank-dropdown .filter-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
}

.rank-dropdown .filter-menu button:hover,
.rank-dropdown .filter-menu button.selected {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}

.rank-dropdown .filter-menu img {
  width: 26px;
  height: 26px;
}
.role-icon img { background: transparent !important; border: none !important; }

/* Navbar logo always small */
.brand img {
  position: absolute !important;
  left: -150px !important;
  top: 50% !important;
  width: 78px !important;
  height: 78px !important;
  transform: translateY(-50%) translateY(15px) scaleX(1.3) scale(3) !important;
  transform-origin: left center !important;
}

/* Nav links/buttons should match theme */
.navbar a,
.navbar .nav-link,
.navbar .btn,
.navbar button {
  color: var(--muted) !important;
}

.navbar a:hover,
.navbar .nav-link:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,0.06) !important;
}

.navbar .btn,
.navbar .input {
  background: rgba(15,19,29,0.65) !important;
  border-color: var(--border) !important;
}

.navbar .btn:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* Navbar champion autocomplete */
.champ-autocomplete {
  position: relative;
  width: 100%;
}

.champ-autocomplete .champ-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: rgba(15,19,29,0.92);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-height: 240px;
  overflow-y: auto;
  z-index: 200;
}

.champ-autocomplete .champ-suggestion {
  padding: 10px 12px;
  color: var(--text);
  cursor: pointer;
}

.champ-autocomplete .champ-suggestion:hover {
  background: rgba(255,255,255,0.06);
}

/* Do not show hover box on logo */
.navbar .brand:hover {
  background: none !important;
  color: inherit !important;
}

.navbar .btn-primary {
  color: var(--text) !important;
}

/* Global link color */
a { color: var(--text); }
a:hover { color: var(--accent); }

/* Table links inherit (so champ names don't become neon) */
table a { color: inherit !important; }
table a:hover { color: var(--accent) !important; }

/* Ensure table background is dark */
table { background: transparent !important; }
thead, tbody, tr, th, td { background: transparent; }
th { background: rgba(255,255,255,0.04) !important; }
td { background: transparent !important; }
.table-wrap {
  background: rgba(15, 19, 29, 0.65) !important;
  border: 1px solid var(--border);
}

/* Summary stat cards on builds page */
.summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  width: 100%;
}

.stat-card.sm {
  flex: 1 1 140px;
  min-width: 140px;
  background: rgba(15,19,29,0.65);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
}

.stat-card .label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.3px;
}

.stat-card .value {
  font-size: 18px;
  color: var(--text);
  font-weight: 600;
}

/* Unified dark surface for inline boxes (item slots, trinkets, etc.) */
.panel-surface {
  background: rgba(15,19,29,0.65) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  color: var(--text);
}

/* ===== Bootstrap Dark Skin (Rift Pulse) ===== */

/* Cards/panels used in templates */
.bg-panel {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* Text utility replacements */
.text-dim { color: var(--muted) !important; }
.text-white { color: var(--text) !important; }

/* Bootstrap forms */
.form-label { color: var(--muted) !important; }

.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
  background-color: rgba(15,19,29,0.65) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.form-control::placeholder {
  color: rgba(231,234,240,0.45) !important;
}

/* Bootstrap buttons */
.btn {
  border-color: var(--border) !important;
}

.btn-primary {
  color: var(--text) !important;
  border-color: rgba(88,166,255,0.35) !important;
  background: linear-gradient(90deg, rgba(88,166,255,0.35), rgba(86,214,255,0.22)) !important;
}

.btn-primary:hover {
  background: linear-gradient(90deg, rgba(88,166,255,0.45), rgba(86,214,255,0.30)) !important;
}

/* Bootstrap list groups and muted text on player page */
.list-group-item {
  background: rgba(15,19,29,0.65) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.list-group-item + .list-group-item {
  border-top-color: var(--border) !important;
}

.text-muted { color: var(--muted) !important; }

/* Ensure cards/lists inherit theme text and background */
.card,
.card-body,
.list-group {
  background: rgba(15,19,29,0.65) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Bootstrap tables */
.table,
.table thead th,
.table tbody td,
.table tbody tr {
  color: var(--text) !important;
  background: transparent !important;
  border-color: var(--border) !important;
}

.table thead th {
  color: var(--muted) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* Dropdowns / menus */
.dropdown-menu {
  background: rgba(15,19,29,0.92) !important;
  border: 1px solid var(--border) !important;
}
.dropdown-item {
  color: var(--text) !important;
}
.dropdown-item:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* Icon tooltip */
.rp-tooltip{
  position: fixed;
  z-index: 9999;
  max-width: 360px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(88,166,255,0.28);
  background: linear-gradient(180deg, rgba(13,18,28,0.98), rgba(9,12,18,0.98));
  color: var(--text);
  box-shadow: 0 14px 28px rgba(0,0,0,0.55);
  pointer-events: none;
}
.rp-tooltip.rp-tooltip-wiki{
  padding: 6px;
  background: rgba(10,13,20,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 14px 28px rgba(0,0,0,0.55);
  border-radius: 10px;
  max-width: none;
  --wiki-scale: 0.9;
}
.rp-tooltip-wiki .blue-tooltip{
  font-size: 12px;
  line-height: 1.25;
}
.rp-tooltip-wiki .blue-tooltip img{
  max-width: 100%;
  height: auto;
}
.rp-tooltip-wiki table{
  width: auto;
  min-width: 0;
  border-collapse: collapse;
}
.rp-tooltip-wiki th,
.rp-tooltip-wiki td{
  padding: 0;
  border: none;
  text-align: left;
  text-transform: none;
  font-size: inherit;
  letter-spacing: normal;
  position: static;
  background: transparent;
}
.rp-tooltip-wiki tr:hover td{
  background: transparent;
}
.rp-tooltip-top{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.rp-tooltip-icon{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(15,19,29,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  flex: 0 0 auto;
}
.rp-tooltip-icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rp-tooltip-head{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rp-tooltip-title{
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: #f4f7ff;
}
.rp-tooltip-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rp-tooltip-meta-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.06);
  font-size: 11px;
  color: var(--muted);
}
.rp-tooltip-meta-label{
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
  color: var(--muted-2);
}
.rp-tooltip-meta-value{
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}
.rp-tooltip-coin{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe9a6, #d6a73a);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.rp-tooltip-body{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
}
.rp-tooltip-body br{
  content: "";
  display: block;
  margin-top: 6px;
}
.rp-tooltip-body mainText,
.rp-tooltip-body stats{
  display: block;
}
.rp-tooltip-body stats{
  color: #dbe6ff;
}
.rp-tooltip-body attention{
  color: #ffd166;
  font-weight: 600;
}
.rp-tooltip-body physicalDamage{
  color: #ffb454;
  font-weight: 600;
}
.rp-tooltip-body magicDamage{
  color: #7ad7ff;
  font-weight: 600;
}
.rp-tooltip-body magic{
  color: #7ad7ff;
  font-weight: 600;
}
.rp-tooltip-body trueDamage{
  color: #f6f7ff;
  font-weight: 600;
}
.rp-tooltip-body healing{
  color: #7ee787;
  font-weight: 600;
}
.rp-tooltip-body shield{
  color: #8bd5ff;
  font-weight: 600;
}
.rp-tooltip-body speed,
.rp-tooltip-body MS,
.rp-tooltip-body attackSpeed{
  color: #8ee3ff;
  font-weight: 600;
}
.rp-tooltip-body slow{
  color: #fca5a5;
  font-weight: 600;
}
.rp-tooltip-body gold{
  color: #f6c453;
  font-weight: 600;
}
.rp-tooltip-body passive,
.rp-tooltip-body active,
.rp-tooltip-body unique,
.rp-tooltip-body spellPassive,
.rp-tooltip-body spellActive,
.rp-tooltip-body keyword,
.rp-tooltip-body keywordMajor,
.rp-tooltip-body keywordName,
.rp-tooltip-body keywordStealth,
.rp-tooltip-body recast,
.rp-tooltip-body toggle,
.rp-tooltip-body tap,
.rp-tooltip-body hold,
.rp-tooltip-body release,
.rp-tooltip-body charge,
.rp-tooltip-body evolve,
.rp-tooltip-body status{
  color: #a8b8ff;
  font-weight: 700;
}
.rp-tooltip-body spellName{
  color: #f2f6ff;
  font-weight: 700;
}
.rp-tooltip-body OnHit{
  color: #9dd7ff;
  font-weight: 600;
}
.rp-tooltip-body armorPen{
  color: #ffb454;
  font-weight: 600;
}
.rp-tooltip-body danger{
  color: #fb7185;
  font-weight: 700;
}
.rp-tooltip-body rules,
.rp-tooltip-body specialRules{
  display: block;
  margin-top: 6px;
  color: var(--muted);
}
.rp-tooltip-body flavorText{
  display: block;
  margin-top: 8px;
  color: var(--muted-2);
  font-style: italic;
}
.rp-tooltip-body scaleAD,
.rp-tooltip-body scaleAP,
.rp-tooltip-body scaleArmor,
.rp-tooltip-body scaleHealth,
.rp-tooltip-body scaleMR,
.rp-tooltip-body scaleMana,
.rp-tooltip-body scaleLethality,
.rp-tooltip-body scaleLevel,
.rp-tooltip-body scalemana{
  color: #8ee3ff;
  font-weight: 600;
}
.rp-tooltip-body lifeSteal,
.rp-tooltip-body omnivamp,
.rp-tooltip-body health{
  color: #7ee787;
  font-weight: 600;
}
.rp-tooltip-body statGood,
.rp-tooltip-body buffedStat,
.rp-tooltip-body buffedstat{
  color: #7ee787;
  font-weight: 600;
}
.rp-tooltip-body prismatic,
.rp-tooltip-body rarityLegendary,
.rp-tooltip-body rarityMythic,
.rp-tooltip-body rarityGeneric,
.rp-tooltip-body ornnBonus{
  color: #f6c453;
  font-weight: 700;
}
.rp-tooltip-body titleLeft,
.rp-tooltip-body titleRight{
  display: block;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 6px;
}
.rp-tooltip-body lol-uikit-tooltipped-keyword{
  color: #a8b8ff;
  font-weight: 600;
  border-bottom: 1px dotted rgba(168,184,255,0.6);
}
.rp-tooltip-body ul,
.rp-tooltip-body ol{
  margin: 6px 0 0 16px;
  padding: 0;
}
.rp-tooltip-body li{
  margin: 2px 0;
}

/* Flash messages: your HTML uses flash message class */
.flash.message {
  border-color: rgba(251,191,36,0.30) !important;
  background: rgba(251,191,36,0.08) !important;
}