body {
  font-family: Arial, Helvetica, sans-serif;
  background: #0f172a;
  color: #e5e7eb;
  margin: 0;
  padding: 20px;
}
h1 { margin-bottom: 4px; }
.author { font-size: 0.9rem; color: #94a3b8; margin-bottom: 12px; }

.tabs { display:flex; gap:10px; margin-bottom:12px; }
.tab { padding:8px 14px; background:#020617; border:2px solid #1e293b; border-radius:10px; cursor:pointer; }
.tab.active { border-color:#38bdf8; color:#38bdf8; }

.search-container { position:relative; display:flex; gap:8px; align-items:center; margin-bottom:12px; }
#search-bar { width:30%; padding:8px 12px; border-radius:8px; border:1px solid #1e293b; background:#020617; color:#e5e7eb; font-size:1rem; }

.player-level-select {
  padding:8px 10px; border-radius:8px; border:1px solid #1e293b;
  background:#020617; color:#e5e7eb; cursor:pointer;
}

.search-results { position:absolute; top:110%; left:0; width:30%; background:#020617; border:1px solid #1e293b; border-radius:8px; max-height:300px; overflow-y:auto; z-index:10; }
.search-item { display:flex; gap:8px; padding:6px; cursor:pointer; align-items:center; border-bottom:1px solid #1e293b; }
.search-item:hover { background:#1e293b; }
.search-item img { width:32px; height:32px; object-fit:cover; border-radius:4px; }
.search-item span { font-size:0.9rem; }

.filter-dropdown-container { position:relative; }
.filter-dropdown-container button {
  padding:8px 10px; border-radius:8px; border:1px solid #1e293b;
  background:#020617; color:#e5e7eb; cursor:pointer;
}
.filter-dropdown {
  display:none; position:absolute; right:0; top:110%; background:#020617;
  border:1px solid #1e293b; border-radius:8px; padding:10px; z-index:20;
  min-width:200px; flex-direction:column; gap:8px;
}
.filter-dropdown select, .filter-dropdown button {
  width:100%; padding:6px 10px; border-radius:8px; border:1px solid #1e293b;
  background:#020617; color:#e5e7eb; cursor:pointer;
}

.tier-bar { display:grid; grid-template-columns:repeat(8,1fr); gap:12px; margin-bottom:12px; }
.tier-box { background:#020617; border:2px solid #1e293b; border-radius:12px; padding:16px; text-align:center; font-size:1.3rem; cursor:pointer; }
.tier-box.active { border-color:#38bdf8; color:#38bdf8; }

.stats-panel { background:#020617; border:2px solid #1e293b; border-radius:12px; padding:16px; margin-bottom:20px; display:none; }
.stats-section { margin-bottom:12px; }
.stats-section h3 { font-size:.8rem; color:#94a3b8; margin:0 0 6px; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; font-size:.8rem; }
.stat { background:#020617; border:1px solid #1e293b; border-radius:8px; padding:6px 8px; display:flex; justify-content:space-between; }

.tier-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px; }
.char-card { aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:#020617; border:2px solid transparent; position:relative; }
.char-card img { width:100%; height:100%; object-fit:cover; }
.char-tooltip { position:absolute; inset:0; background:rgba(2,6,23,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.75rem; opacity:0; }
.char-card:hover .char-tooltip { opacity:1; }
.char-name { font-weight:bold; }
.char-element { font-size:.7rem; color:#93c5fd; }

.char-card[data-element="Mountain"] { border-color:#fb923c; box-shadow:0 0 8px rgba(251,146,60,.6); }
.char-card[data-element="Fire"] { border-color:#ef4444; box-shadow:0 0 8px rgba(239,68,68,.6); }
.char-card[data-element="Wind"] { border-color:#38bdf8; box-shadow:0 0 8px rgba(56,189,248,.6); }
.char-card[data-element="Forest"] { border-color:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.6); }