.tier-grid{display:grid;grid-template-columns:100px repeat(var(--count),1fr);gap:4px;background:#1f2024;padding:10px;border-radius:6px;overflow-x:auto;width:100%;box-sizing:border-box}
.grid-header{background:#2d3038;color:#aaa;text-align:center;padding:8px 4px;font-size:13px;text-transform:uppercase;border-bottom:2px solid #15171a}
.empty-cell{background:transparent}
.tier-label-cell{writing-mode:vertical-rl;text-orientation:mixed;color:#fff;font-weight:bold;padding:8px;font-size:14px;text-align:center;border-top-left-radius:4px;border-bottom-left-radius:4px}
.tier-cell{background:#2a2c31;padding:12px;min-height:140px;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;border-radius:4px}

.tier-item img{width:80px;height:80px;border-radius:4px;object-fit:cover;display:block;margin:0 auto;border:2px solid #15171a}
.tier-item-label{margin-top:6px;line-height:1.2;font-weight:500;display:flex;align-items:center;justify-content:center}
.element-icon{width:16px;height:16px;margin-left:4px;border-radius:2px}
@media(max-width:800px){.tier-grid{grid-template-columns:80px repeat(var(--count),1fr)}.tier-item,.tier-item img{width:60px;height:60px}.tier-cell{min-height:100px;padding:8px}}.tier-item{width:calc(50% - 12px)}.tier-cell{min-height:100px;padding:8px}.tier-item img{border-width:2px}}.tier-item,.tier-item img{width:60px;height:60px}.element-icon{width:12px;height:12px}.tier-cell{min-height:100px;padding:8px}}
.element-icon{width:16px!important;height:16px!important;object-fit:contain!important;margin-left:4px!important;border-radius:2px!important}
@media(max-width:800px){.tier-grid{grid-template-columns:80px repeat(var(--count),1fr)}.tier-item,.tier-item img{width:60px;height:60px}.tier-cell{min-height:100px;padding:8px}}.tier-item{width:calc(50% - 12px)}.tier-cell{min-height:100px;padding:8px}.tier-item img{border-width:2px}}}

/* Tooltip styles */
.tier-item{position:relative}
.tier-tooltip{position:absolute;left:50%;top:-10px;transform:translate(-50%, -100%);display:none;z-index:50}
.tier-tooltip-inner{background:#2a2c31;padding:12px 16px;border-radius:4px;border:1px solid #444;min-width:180px;text-align:center;box-shadow:0 6px 12px rgba(0,0,0,.4)}
.tier-item:hover .tier-tooltip{display:block}
.tooltip-avatar{width:80px;height:80px;object-fit:cover;border-radius:4px;margin:0 auto 6px;display:block}
.tooltip-name{font-weight:600;margin-bottom:4px;font-size:14px}
.tooltip-meta{display:flex;justify-content:center;align-items:center;gap:6px;margin-bottom:6px}
.tooltip-rarity{padding:2px 6px;border:2px solid #fff;border-radius:3px;font-size:10px}
.tooltip-element img{width:20px;height:20px;display:block}
.tooltip-group{font-size:11px;font-weight:600}
.tooltip-strengths{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.tooltip-strength{background:#444;padding:2px 6px;border-radius:3px;font-size:10px;display:flex;align-items:center;gap:4px}
.tooltip-strength .square{width:14px;height:14px;display:inline-block;border-radius:2px}
@media(max-width:800px){.tier-tooltip-inner{min-width:140px;padding:8px}.tooltip-avatar{width:60px;height:60px}}

/* Tooltip fix v1.44 */
.tier-item{position:relative}
.tier-tooltip{position:absolute;left:50%;top:-8px;transform:translate(-50%, -100%);display:none;z-index:100}
.tier-item:hover .tier-tooltip{display:block}
.tier-tooltip-inner{background:#2a2c31;padding:12px 16px;border-radius:4px;border:1px solid #444;min-width:200px;text-align:center;box-shadow:0 6px 12px rgba(0,0,0,.4)}
.tooltip-avatar{width:80px;height:80px;object-fit:cover;border-radius:4px;margin:0 auto 6px;display:block}
.tooltip-name{font-weight:600;margin-bottom:4px;font-size:14px}
.tooltip-meta{display:flex;justify-content:center;align-items:center;gap:6px;margin-bottom:6px}
.tooltip-rarity{padding:2px 6px;border:2px solid #fff;border-radius:3px;font-size:10px}
.tooltip-element img{width:20px;height:20px;display:block}
.tooltip-group{font-size:11px;font-weight:600}
.tooltip-strengths{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.tooltip-strength{background:#444;padding:3px 6px;border-radius:3px;font-size:10px;display:flex;align-items:center;gap:4px}
.tooltip-strength .square{width:14px;height:14px;display:inline-block;border-radius:2px}
@media(max-width:800px){.tier-tooltip-inner{min-width:140px;padding:8px}.tooltip-avatar{width:60px;height:60px}}

/* v1.47 tooltip overflow fix */
.tier-grid,.tier-cell{overflow:visible}

/* v1.52 patch */
.tier-grid, .tier-cell, .entry-content, .post-content, .site-main { overflow: visible !important; }
.tier-item{ position:relative; }
.tier-tooltip{
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translate(-50%, -8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:9999;
  transition:opacity .15s;
}
.tier-item:hover .tier-tooltip{ opacity:1; visibility:visible; }

/* v1.53 widen tooltip */
.tier-tooltip-inner{min-width:320px;max-width:420px;}

/* v1.55 ancestor overflow fix */
.entry-content, .post-content, .site-main, .content-area, .elementor-widget-container{overflow:visible!important;}
.tier-tooltip-inner{min-width:340px;max-width:460px;}

/* v1.57 thin rarity border */
.tier-item img[style*="border:2px"]{border-width:1px !important;box-shadow:0 0 0 2px var(--rc,#fff) !important;}

/* v1.63 ensure tooltip above everything */
.tier-tooltip{z-index:99999 !important;}
/* If parent cuts overflow, force visible */
.entry-content, .post-content, .site-main, .content-area, .elementor-widget-container, .container, .wp-block-post-content{
  overflow: visible !important;
  position: relative;
}

/* v1.64 thin border on tooltip via inline, fallback: */
.tier-tooltip-inner{border: 2px solid var(--rc,#444);box-shadow:0 0 4px var(--rc,#44455);}
.tier-tooltip{z-index:99999!important;}

/* v1.65 no glow, thin border */
.tier-tooltip-inner{box-shadow:none !important;border: 2px solid var(--rc,#444) !important;}
.tier-item img[style*="border:"]{box-shadow:none !important;}
/* fixed tooltip container to bypass overflow */
.tl-fixed-tip{
  position:fixed;
  z-index:999999;
  pointer-events:none;
  opacity:0;
  transition:opacity .1s;
}
.tl-fixed-tip.visible{opacity:1;}
.tl-fixed-tip .tier-tooltip-inner{border: 2px solid var(--rc,#444);box-shadow:none;min-width:300px;max-width:420px;background:#2a2c31;padding:12px 16px;border-radius:4px;text-align:center;}
.tl-fixed-tip.arrow-top::after,
.tl-fixed-tip.arrow-bottom::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
}
.tl-fixed-tip.arrow-top::after{
  border-top:8px solid #2a2c31;
  bottom:-8px;
}
.tl-fixed-tip.arrow-bottom::after{
  border-bottom:8px solid #2a2c31;
  top:-8px;
}

/* v1.65m extra margins around list */
.tier-grid{
  margin:60px 160px 60px 0 !important;
}

/* v1.65n tweaks */
.tier-grid{
  margin:60px 160px 60px 0 !important; /* more right margin */
}
/* Palier label text stronger (yellow readable) */
.tier-label{
  font-weight:700 !important;
  font-size:18px !important;
  text-shadow:0 2px 3px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.7);
  filter: none !important;
  color:#fff !important;
}
/* Tooltip palier square emphasis */
.tooltip-strength .square-text{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:22px;
  padding:0 8px;
  border-radius:4px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.4px;
  color:#fff;
  box-shadow:0 0 4px rgba(0,0,0,.35);
  border:2px solid currentColor;
}


/* v5.0.4 adjustments */
.tier-list-container {
    padding: 50px !important;
    overflow-x: auto;
    /* Use the browser's main scrollbar instead of a scrollable container */
    overflow-y: visible;
    /* Extend the tier list to full article width while keeping a margin */
    width: calc(100% - 40px) !important;
    margin: 0 20px !important;
}
.tier-list-container .tier-column {
    transform: scaleX(0.5);
    transform-origin: left;
}
.tier-list-container .tier-column, 
.tier-list-container .tier-column * {
    font-size: 2em !important;
}


/* v5.0.6 adjustments */
.tier-grid {
    padding: 50px !important;
    overflow-x: auto !important;
    /* Use the page's main scrollbar instead of a scrollable container */
    overflow-y: visible !important;
    grid-template-columns: 50px repeat(var(--count), 1fr) !important;
}
.tier-label-cell {
    font-size: 2em !important;
}


/* v5.0.7 adjustments: center tier title with text-shadow */
.tier-label-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
}


/* v5.0.8 override for fixed item width */



/* v5.0.9 adjustments: layout change for small mobile */

/*
 * v5.0.96 - Improve tooltip readability and mobile spacing
 *
 * The tooltip text (name, meta, rarity, group and strengths) is scaled up
 * independently of the avatar image. This makes the information much easier
 * to read on both desktop and mobile without enlarging the picture.  In
 * addition, we introduce a spacer element after the desktop grid to create
 * a large empty area at the bottom of the tier list and add generous
 * margins around mobile items to prevent overlapping text.
 */

/* Larger typography inside the tooltip (leaving the image unchanged) */
.tier-tooltip-inner .tooltip-name {
  font-size: 20px !important;
  font-weight: 700 !important;
}
.tier-tooltip-inner .tooltip-meta,
.tier-tooltip-inner .tooltip-rarity,
.tier-tooltip-inner .tooltip-group {
  font-size: 18px !important;
}
.tier-tooltip-inner .tooltip-element img {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
}
.tier-tooltip-inner .tooltip-strength {
  font-size: 16px !important;
  gap: 6px !important;
}
.tier-tooltip-inner .tooltip-strength .square-text {
  font-size: 16px !important;
  min-width: 34px !important;
  height: 30px !important;
  padding: 4px 8px !important;
}
@media (max-width: 800px) {
  .tier-tooltip-inner .tooltip-name {
    font-size: 18px !important;
  }
  .tier-tooltip-inner .tooltip-meta,
  .tier-tooltip-inner .tooltip-rarity,
  .tier-tooltip-inner .tooltip-group {
    font-size: 16px !important;
  }
  .tier-tooltip-inner .tooltip-element img {
    width: 22px !important;
    height: 22px !important;
  }
  .tier-tooltip-inner .tooltip-strength {
    font-size: 14px !important;
  }
  .tier-tooltip-inner .tooltip-strength .square-text {
    font-size: 14px !important;
    min-width: 28px !important;
    height: 26px !important;
  }
}

/* Spacer element inserted after the desktop grid to create additional empty space */
.tier-grid-spacer {
  height: 600px;
}

/* Row inside the grid that spans all columns to provide extra vertical space at the end of the list. */
.tier-grid-spacer-row {
  grid-column: 1 / -1;
  height: 600px;
}

/* Increase top and bottom margin between mobile tier items to prevent text overlap */
@media (max-width: 768px) {
  .mobile-group-items .tier-item {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
}
@media (max-width: 480px) {
    .tier-grid {
        display: flex !important;
        flex-direction: column !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    .tier-list-container {
        padding: 20px !important;
        overflow: hidden !important;
    }
    .tier-column {
        width: auto !important;
        transform: none !important;
    }
    
}


/* v5.0.10: revert desktop .tier-item width and mobile layout */
.tier-item {
    width: calc(50% - 12px) !important;
}

/* Mobile-specific structure for ≤480px */
@media (max-width: 480px) {
    .tier-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: auto !important;
        gap: 12px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    .tier-item {
        width: auto !important;
        margin: 8px auto !important;
    }
    /* Keep colors, borders, shadows as in desktop */
}


/* v5.0.16: Desktop/mobile layouts */
.desktop-only { display: block; }
.mobile-only  { display: none; }

@media (max-width: 600px) {
  .desktop-only { display: none !important; }
  .mobile-only  { display: block !important; }
  .tier-list-container { padding: 50px; overflow-y: auto; }
  .mobile-tier { margin-bottom: 30px; }
  .mobile-tier-header {
    padding: 12px; font-size:1.4em; color:#fff; text-align:center;
  }
  .mobile-group { margin: 16px 0; }
  .mobile-group-header {
    padding: 8px; font-size:1.2em; color:#fff; text-align:left;
  }
  .mobile-group-items {
    display:flex; flex-wrap:wrap; gap:12px; padding:10px 0; overflow-x:auto;
  }
  /* removed hide of tier-cell */
  /*
   * On mobile we previously forced each tier-item to be displayed as block with
   * `!important`, which prevented JavaScript from hiding items via
   * `display: none`. Removing the `!important` here allows inline styles set
   * by the filters to override the display and properly hide/show items.
   */
  .mobile-group-items .tier-item {
    width:100px !important;
    margin:6px;
    display:block;
  }
}


/* v5.0.18 desktop tweaks: margin and text color */
.tier-item {
    margin: 8px 0 !important;
}
.tier-item-label {
    color: #fff !important;
}
/* Ensure other texts are white */
.grid-header, .tier-label-cell {
    color: #fff !important;
}


/* v5.0.19 adjustments: mobile background color, filter container, fix rarity borders */
.mobile-only .tier-list-container {
    background: #2a2c31 !important;
}

.filter-container {
    display: none;
}

@media (max-width: 600px) {
    .filter-container {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 20px;
    }
    /* Inputs and selects full width */
    .filter-container input,
    .filter-container select {
        width: 100% !important;
    }
    /* Ensure border-color applied on images */
    .mobile-only .tier-item img {
        border-width: 2px !important;
        border-style: solid !important;
    }
}


/* v5.0.27: mobile layout toggling & background */
.desktop-only { display: block !important; }
.mobile-only  { display: none !important; }

@media (max-width: 600px) {
  .desktop-only { display: none !important; }
  .mobile-only  { display: block !important; }
  .tier-list-container { background: #2a2c31 !important; }
}


/* v5.0.28: Ensure filters visible and styled on mobile */
.filter-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}
.filter-container .filter-group {
    flex: 1 1 auto !important;
    min-width: 120px !important;
}
/* Mobile-specific filter layout */
@media (max-width: 600px) {
    .filter-container {
        flex-direction: column !important;
    }
    .filter-container .filter-group {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
}
/* v5.0.67 enhancements */
.tier-tooltip-inner { font-size: 1.1em; }
.tier-tooltip-inner .tooltip-name { font-size: 1.3em; font-weight: bold; }
/* Palier tier label inside tooltip with border */
.tooltip-strength .stier {
  border: 2px solid currentColor;
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 4px;
}

/* v5.0.68: Adjustments for improved UI */
/* Increase border width around character images with dynamic inline border */
.tier-item img[style*="border:"] {
  border-width: 4px !important;
}
/* Add horizontal margins around each tier item for better spacing */
.tier-item {
  margin-left: 8px !important;
  margin-right: 8px !important;
}
/* Center the character name and element icon with spacing */
.tier-item-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
}
/* Ensure tooltip text appears in white for readability */
.tier-tooltip-inner, .tier-tooltip-inner * {
  color: #ffffff !important;
}

/* Ensure two characters fit per column even with added margins */
.tier-item {
  width: calc(50% - 24px) !important;
}

/* Hide empty filter placeholders inserted in the template */
.filter-container {
  display: none !important;
}

/* v5.0.69 mobile spacing improvements */
.mobile-only .mobile-tier {
  margin-top: 20px;
  margin-bottom: 20px;
}
.mobile-only .mobile-group {
  margin-top: 12px;
  margin-bottom: 12px;
}

/* Responsive adjustments for filter bar on small screens */
@media (max-width: 600px) {
  #tl-filters {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  #tl-filters input[type="search"],
  #tl-filters select,
  #tl-filters button {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* Always display a fine border around the tooltip card */
.tier-tooltip-inner {
  border-width: 1px !important;
  border-style: solid !important;
}

/* v5.0.74 adjust character image size for a slight zoom effect */
.tier-item img {
  width: 90px !important;
  height: 90px !important;
}
@media (max-width: 800px) {
  .tier-item img {
    width: 70px !important;
    height: 70px !important;
  }
}

/* v5.0.75 ensure zoom applies only to the main character image and not the element icon */
/*
 * In previous versions the rule `.tier-item img` applied a fixed width to
 * every image inside a tier item, causing the small element icons to zoom
 * alongside the character portrait.  To avoid this we first reset any
 * dimensions on all images within a tier item and then explicitly size
 * only the first (character) image.  Subsequent images (the element
 * icons) inherit their natural size or are constrained by the `.element-icon`
 * rule elsewhere.
 */
.tier-item img {
  width: auto !important;
  height: auto !important;
}
.tier-item > img {
  width: 90px !important;
  height: 90px !important;
}
@media (max-width: 800px) {
  .tier-item > img {
    width: 70px !important;
    height: 70px !important;
  }
}

/* v5.0.75 remove padding from the tier-list-container and enforce full width */
.tier-list-container {
  padding: 0 !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* v5.0.73 layout fixes: ensure the tier list takes full width and remove excessive right margin */
.tier-grid {
  margin: 0 !important;
}
.tier-list-container {
  width: 100% !important;
  margin: 0 auto !important;
}
/* In mobile view, stack filter controls vertically and make them full width */
@media (max-width: 600px) {
  #tl-filters {
    /* Display filter elements in a 2-column grid on very small screens */
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
  }
  /* Within the filter bar, inputs and selects occupy full column width */
  #tl-filters input[type="search"],
  #tl-filters select,
  #tl-filters button {
    width: 100% !important;
  }
  /* Place reset button on a separate row spanning two columns */
  #tl-filters .reset-btn {
    grid-column: span 2;
  }
  /* Force-block should not override grid layout */
  #tl-filters .force-block {
    display: contents;
  }
}

/* Beautify and align the filter section */
#tl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}
#tl-filters input[type="search"],
#tl-filters select,
#tl-filters button {
  background: #2a2c31;
  border: 1px solid #444;
  color: #fff;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 14px;
}
#tl-filters .reset-btn {
  background: #444;
  cursor: pointer;
  transition: background-color 0.2s;
}
#tl-filters .reset-btn:hover {
  background: #555;
}

/* v5.0.76: Improve mobile filter layout - display two filters per row */
@media (max-width: 600px) {
  #tl-filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
  }
  /* Force each filter (input/select/button) to take full width of its grid cell */
  #tl-filters input[type="search"],
  #tl-filters select,
  #tl-filters button {
    width: 100% !important;
  }
  /* Place reset button on its own row spanning both columns */
  #tl-filters .reset-btn {
    grid-column: span 2;
  }
}

/* v5.0.76: reduce the size of the character image shown in the tooltip */
/*
 * v5.0.78: unify tooltip avatar size with the portrait shown in the grid
 * In previous versions the avatar size was reduced, which made the
 * portraits appear misaligned compared to the grid. To match the
 * character images displayed in the tier list, the avatar now uses the
 * same dimensions as `.tier-item > img` (90px on desktop and 70px on
 * small screens). These definitions override any earlier sizes.
 */
/*
 * v5.0.80: return tooltip avatar to the same size as the portraits in the
 * tier list (80px on desktop, 60px on mobile), matching the appearance in
 * version 5.0.73.
 */
.tooltip-avatar {
  width: 80px !important;
  height: 80px !important;
}
@media (max-width: 800px) {
  .tooltip-avatar {
    width: 60px !important;
    height: 60px !important;
  }
}

/* v5.0.76: style the separate Mode de jeux (force) filter container */
#tl-mode-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  background: #2a2c31;
  border: 1px solid #444;
  color: #fff;
  border-radius: 4px;
  padding: 8px 12px;
  /* v5.0.76: add margin on top and center horizontally */
  margin: 20px auto 16px;
}

/*
 * v5.0.90: ensure scrollbars appear by adding significant whitespace to the
 * right and bottom of the tier list on desktop.  This margin triggers the
 * horizontal and vertical scroll bars so users can always scroll when tooltips
 * extend beyond the visible area.
 */
@media (min-width: 600px) {
    .tier-list-container {
        margin-right: 400px !important;
        margin-bottom: 400px !important;
    }
}

/*
 * v5.0.91: divide tooltip avatar size by three and add an animated starry background
 * The avatar in the tooltip is greatly reduced (approx. one-third of the
 * original portrait) to make the tooltip more compact. A decorative star
 * pattern is displayed behind the avatar, with a slow scrolling animation
 * to give a shimmering effect. All properties use `!important` to override
 * any previous definitions.
 */
.tooltip-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto 6px !important;
    background-image: url("../star-pattern.png") !important;
    background-size: cover !important;
    background-repeat: repeat !important;
    /* Animate the background to create a twinkling effect */
    animation: starScroll 6s linear infinite !important;
}
@media (max-width: 600px) {
    .tooltip-avatar {
        width: 20px !important;
        height: 20px !important;
    }
}
@keyframes starScroll {
    from { background-position: 0 0; }
    to   { background-position: 100% 100%; }
}

/*
 * v5.0.95: Improve readability and spacing
 *
 * - Enlarge tooltip text (names, meta, strengths, rarity labels) and icons
 *   without altering the image size. Increased sizes further for better
 *   readability after feedback.
 * - Add a very large bottom margin to the tier list container on desktop
 *   to provide breathing room.
 * - On mobile, add even more space above and below each character card to
 *   prevent text overlap.
 * - On mobile, center the filter bar and narrow its width; increase input
 *   font sizes for better readability.
 */
/* Tooltip text enlargement */
.tier-tooltip-inner {
    font-size: 1.6em !important;
}
.tier-tooltip-inner .tooltip-name {
    font-size: 1.8em !important;
    font-weight: bold !important;
}
.tier-tooltip-inner .tooltip-meta {
    font-size: 1.4em !important;
}
.tier-tooltip-inner .tooltip-strengths {
    font-size: 1.4em !important;
}
.tooltip-strength .square-text {
    font-size: 1.4em !important;
    padding: 6px 8px !important;
}
.tooltip-rarity {
    font-size: 1.4em !important;
    padding: 6px 8px !important;
}
.tooltip-element img {
    width: 28px !important;
    height: 28px !important;
}

/* Larger bottom margin for desktop */
@media (min-width: 600px) {
    .tier-list-container {
        margin-bottom: 800px !important;
    }
}

/* More spacing between characters on mobile */
@media (max-width: 600px) {
    .mobile-group-items .tier-item {
        margin-top: 24px !important;
        margin-bottom: 24px !important;
    }
    /* Center and narrow filter container on mobile */
    #tl-filters {
        width: 85% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        flex-direction: column !important;
    }
    #tl-filters input[type="search"],
    #tl-filters select {
        width: 100% !important;
        font-size: 16px !important;
    }
}

/*
 * v5.0.92: reduce tooltip size by a factor of three.
 * Apply a scale transform to the tooltip inner container (and its fixed
 * counterpart) so the entire tooltip shrinks proportionally in width and
 * height. The origin is set to the top left to keep the tooltip aligned
 * with the item being hovered.
 */
.tier-tooltip-inner,
.tl-fixed-tip .tier-tooltip-inner {
    transform: scale(0.66) !important;
    transform-origin: top left !important;
}
#tl-mode-filter label {
  font-weight: 600;
  margin-right: 4px;
  color: #fff;
}
#tl-mode-filter select {
  background: #2a2c31;
  border: 1px solid #444;
  color: #fff;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 14px;
}
@media (max-width: 600px) {
  #tl-mode-filter {
    flex-direction: column;
    align-items: flex-start;
  }
  #tl-mode-filter label {
    margin-right: 0;
    margin-bottom: 4px;
  }
  #tl-mode-filter select {
    width: 100%;
  }
}

/* v5.0.78: centre the filter bars and adjust margins */
#tl-filters {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#tl-mode-filter {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
  justify-content: center !important;
}

/*
 * v5.0.90: further reduce tooltip avatar size
 * The avatar shown in the tooltip is reduced to 50px on larger screens and
 * 40px on small screens. These values use `!important` to ensure they take
 * precedence over any earlier definitions.  The margin, border radius and
 * object-fit are retained for consistency with the grid.
 */
.tooltip-avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto 6px !important;
}
@media (max-width: 600px) {
    .tooltip-avatar {
        width: 40px !important;
        height: 40px !important;
    }
}