:root {
  --bg: #0b1020;
  --card: #111731;
  --muted: #8ea0c0;
  --text: #e7ecf8;
  --accent: #6aa1ff;
  --accent-2: #9cf2ff;
  --ring: rgba(106,161,255,.35);
}

html, body {
  background: radial-gradient(1200px 800px at 10% 0%, #111d3b 0%, #0b1020 40%, #080c19 100%);
  color: var(--text);
  min-height: 100%;
}

.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0));
  background-color: var(--card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

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

.btn {
  display: inline-flex; gap: .5rem; align-items: center;
  padding: .625rem 1rem; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.btn:hover { box-shadow: 0 0 0 3px var(--ring); }

.badge { padding: .2rem .5rem; border-radius: 999px; background: rgba(156,242,255,.12); color: var(--accent-2); }
.badge-danger { background: rgba(255, 60, 60, .18); color: #ffb3b3; border: 1px solid rgba(255, 60, 60, .35); border-radius: 10px; padding: .25rem .5rem; font-weight: 600; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }

.tooltip { position: relative; }
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: #1f2937; color: white; font-size: 12px;
  padding: 4px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: .15s;
}
.tooltip:hover::after { opacity: 1; bottom: 140%; }

/* Navbar with image backdrop */
.navbar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background:
    linear-gradient(180deg, rgba(10,14,30,.75), rgba(10,14,30,.45)),
    url("/static/header-bg.jpg") center/cover no-repeat;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Autosuggest (index) */
.typeahead{position:relative}
.typeahead-list{
  position:absolute; inset-inline:0; top:100%; margin-top:.25rem;
  background:#0f162f; border:1px solid rgba(255,255,255,.08); border-radius:12px;
  overflow:hidden; z-index:60; max-height:18rem; overflow-y:auto
}
.typeahead-item{display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; cursor:pointer}
.typeahead-item:hover, .typeahead-item[aria-selected="true"]{background:rgba(255,255,255,.06)}
.typeahead-empty{padding:.75rem; color:#aab4cf; font-size:.9rem}

/* Text chips (skins/charms) */
.item-link {
  display:inline-block; padding:.375rem .6rem; border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  color:#e7ecf8; cursor:pointer; font-size:.9rem; white-space:nowrap;
}
.item-link:hover { box-shadow:0 0 0 3px rgba(106,161,255,.35); }
.tag-list { display:flex; flex-wrap:wrap; gap:.5rem .6rem; }

/* Ranked Charms helpers */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.rc-section + .rc-section { margin-top: .75rem; }
.rc-toggle {
  width: 100%; text-align: left;
  padding: .6rem .75rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
}
.rc-toggle:hover { box-shadow: 0 0 0 3px rgba(106,161,255,.25); }
.rc-body { padding: .6rem .25rem 0 .25rem; }

.season-chip { padding:.35rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.10); }
.season-chip[aria-selected="true"] { box-shadow:0 0 0 3px rgba(106,161,255,.35); }

/* Platform popover */
.platform-popover {
  margin-top: .5rem; padding: .6rem .75rem; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
}
.platform-popover .title { font-weight: 600; }
.platform-popover .row { margin-top: .4rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }