/* ===== Gedeelde "tier-overzicht" designtaal (raids, max battles, …) =====
   Scoped onder .tier-overview. Gebruikt het site-font. Geïnspireerd op de eieren-pagina. */

.tier-overview{
    --to-radius:18px;
    background:
        radial-gradient(900px 380px at 12% -10%, rgba(139,92,246,.08), transparent 60%),
        radial-gradient(820px 360px at 100% -4%, rgba(232,80,58,.07), transparent 55%);
}

/* hero */
.tier-overview .to-hero h1{font-weight:800;letter-spacing:-.02em;}
.tier-overview .to-meta{font-size:.85rem;}

/* filter tabs */
.tier-overview .to-tabs{
    display:flex;gap:.5rem;overflow-x:auto;padding:.5rem 0;margin-bottom:.5rem;
    position:sticky;top:0;z-index:20;scrollbar-width:thin;
    background:rgba(255,255,255,.72);backdrop-filter:blur(8px);
    border-bottom:1px solid #eef0f3;
}
.tier-overview .to-tab{
    flex:0 0 auto;display:inline-flex;align-items:center;gap:.45rem;
    border:1.5px solid #e4e7ec;background:#fff;border-radius:999px;
    padding:.42rem .9rem .42rem .6rem;font-weight:700;
    color:#475467;cursor:pointer;transition:all .15s ease;white-space:nowrap;line-height:1;
}
.tier-overview .to-tab img{height:26px;width:26px;object-fit:contain;}
.tier-overview .to-tab .to-tab-count{
    background:#f2f4f7;color:#667085;border-radius:999px;font-size:.72rem;padding:.08rem .42rem;font-weight:700;
}
.tier-overview .to-tab:hover{border-color:var(--accent,#0d6efd);color:#1d2939;transform:translateY(-1px);}
.tier-overview .to-tab.active{
    border-color:var(--accent,#0d6efd);
    background:color-mix(in srgb, var(--accent,#0d6efd) 12%, #fff);color:#101828;
}
.tier-overview .to-tab.active .to-tab-count{background:var(--accent,#0d6efd);color:#fff;}

/* tier card */
.tier-overview .to-card{
    border:1px solid #eaecf0;border-radius:var(--to-radius);background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.05);overflow:hidden;margin-bottom:1.5rem;
    opacity:0;transform:translateY(14px);animation:toReveal .5s ease forwards;
}
@keyframes toReveal{to{opacity:1;transform:none;}}
.tier-overview .to-card:nth-child(1){animation-delay:.04s}
.tier-overview .to-card:nth-child(2){animation-delay:.09s}
.tier-overview .to-card:nth-child(3){animation-delay:.14s}
.tier-overview .to-card:nth-child(4){animation-delay:.19s}
.tier-overview .to-card:nth-child(5){animation-delay:.24s}
.tier-overview .to-card:nth-child(6){animation-delay:.29s}
.tier-overview .to-card:nth-child(7){animation-delay:.34s}
.tier-overview .to-card:nth-child(8){animation-delay:.39s}

.tier-overview .to-card-head{
    display:flex;align-items:center;gap:.95rem;padding:.9rem 1.15rem;
    border-bottom:1px solid #f2f4f7;position:relative;
    background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, #fff), #fff);
}
.tier-overview .to-card-head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent);}
.tier-overview .to-ico{object-fit:contain;flex:0 0 auto;transition:transform .35s ease;} /* maat via inline style (genormaliseerd op zichtbare ei-grootte) */
.tier-overview .to-card:hover .to-ico{animation:toWobble .6s ease;}
@keyframes toWobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}45%{transform:rotate(6deg)}70%{transform:rotate(-3deg)}}
.tier-overview .to-card-title{font-weight:800;font-size:1.25rem;color:#101828;line-height:1.05;letter-spacing:-.01em;text-transform:capitalize;}
.tier-overview .to-card-sub{font-size:.8rem;color:#667085;}
.tier-overview .to-card-count{
    margin-left:auto;font-weight:800;color:var(--accent);
    background:color-mix(in srgb, var(--accent) 13%, #fff);border-radius:999px;
    padding:.3rem .85rem;font-size:.9rem;white-space:nowrap;
}
.tier-overview .to-card-body{padding:1rem 1.15rem 1.25rem;}

/* sprite-tegel staat nu in snacknap-ui.css (.snk-tile) */
.tier-overview .to-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:.7rem;}

/* level-emblems in de sublijn (mask getint naar tier-accent) */
.tier-overview .to-emblems{display:inline-flex;align-items:center;gap:3px;}
.tier-overview .to-emblem{
    width:15px;height:15px;display:inline-block;background:var(--accent,#98a2b3);
    -webkit-mask:var(--emblem) center/contain no-repeat;mask:var(--emblem) center/contain no-repeat;
}

.tier-overview .to-empty{color:#98a2b3;font-style:italic;padding:1.5rem 0;text-align:center;}

@media (max-width:575px){
    .tier-overview .to-card-title{font-size:1.08rem;}
    .tier-overview .to-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));}
}

/* type-filter dropdown (opt-in via renderTierOverview type_filter) — mirrors .snk-filter-select */
.tier-overview .to-filter-select{
    appearance:none;-webkit-appearance:none;width:100%;
    border:1.5px solid #e4e7ec;border-radius:999px;
    background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center;
    background-size:15px;
    padding:.62rem 2.6rem .62rem 1.1rem;font-size:1rem;font-weight:700;color:#475467;cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.tier-overview .to-filter-select:focus{outline:none;border-color:#bcc6e0;box-shadow:0 0 0 .2rem rgba(58,90,156,.14);}
@media (min-width:992px){
    /* desktop: dropdown compact, rechts naast de zoekbalk uitgelijnd */
    .tier-overview .to-filter-select{width:auto;min-width:200px;}
    .tier-overview .row.mb-1 > .col-lg-6:last-child{display:flex;justify-content:flex-end;align-items:flex-start;}
}