/* ============================================================
   icons.css — RC Icon system using individual transparent PNGs
   Replaces: icon-fix.css, icon-img.css, and all sprite rules
   Upload to: /tools/rhino-challenge/assets/css/icons.css
   Add in header.php AFTER main.css (remove old icon-fix.css line)
   ============================================================ */

/* ── Base icon wrapper ── */
.rc-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

.rc-ico img {
    display: block;
    object-fit: contain;
    width: 44px;
    height: 44px;
    /* Subtle brand drop shadow on transparent icons */
    filter: drop-shadow(0 2px 6px rgba(207, 163, 73, 0.3));
    transition: filter 0.2s;
}

/* ── Size variants ── */
.rc-ico--sm img { width: 24px;  height: 24px; }
.rc-ico--lg img { width: 64px;  height: 64px; filter: drop-shadow(0 3px 10px rgba(207,163,73,0.35)); }
.rc-ico--xl img { width: 96px;  height: 96px; filter: drop-shadow(0 4px 16px rgba(207,163,73,0.4)); }

/* ── Raw img (no wrapper) ── */
.rc-ico-img          { width: 44px; height: 44px; display: block; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(207,163,73,0.3)); }
.rc-ico-img--sm      { width: 24px; height: 24px; }
.rc-ico-img--lg      { width: 64px; height: 64px; }
.rc-ico-img--xl      { width: 96px; height: 96px; }

/* ── Inside GOLD buttons: darken icon to read on gold background ── */
.btn-gold .rc-ico img,
.btn-gold .rc-ico-img {
    filter: brightness(0.2) sepia(1) saturate(4) hue-rotate(195deg);
    width: 18px !important;
    height: 18px !important;
}

/* ── Inside OUTLINE buttons: keep gold glow ── */
.btn-outline .rc-ico img,
.btn-outline .rc-ico-img {
    width: 18px !important;
    height: 18px !important;
    filter: drop-shadow(0 0 4px rgba(207,163,73,0.5));
}

/* ── Avatar cards ── */
.av-card .rc-ico {
    display: flex;
    justify-content: center;
    margin: 0 auto 12px;
}
.av-card .rc-ico img {
    width: 72px;
    height: 72px;
    filter: drop-shadow(0 4px 14px rgba(207,163,73,0.4));
}
.av-card:hover .rc-ico img {
    filter: drop-shadow(0 4px 20px rgba(207,163,73,0.65));
    transform: scale(1.04);
    transition: all 0.25s;
}

/* ── Festival path circles ── */
.path-icon {
    background: transparent !important;
    border: 1.5px solid rgba(207,163,73,0.28) !important;
    box-shadow: none !important;
}
.path-icon .rc-ico img {
    width: 44px;
    height: 44px;
}

/* ── Step cards ── */
.step-icon .rc-ico img { width: 48px; height: 48px; }

/* ── Card / prize icons ── */
.card-icon .rc-ico img,
.p-icon .rc-ico img    { width: 48px; height: 48px; }

/* ── KKABBA section icon row ── */
.kk-icons .rc-ico img  { width: 40px; height: 40px; }

/* ── Leaderboard name icons ── */
.lb-name .rc-ico img   { width: 28px; height: 28px; filter: drop-shadow(0 1px 4px rgba(207,163,73,0.4)); }

/* ── Token badge icons ── */
.tok-badge .rc-ico img { width: 20px; height: 20px; filter: none; }

/* ── Modal icon ── */
.m-icon .rc-ico img    { width: 80px; height: 80px; filter: drop-shadow(0 6px 20px rgba(207,163,73,0.5)); }

/* ── Copyright link bar ── */
.copyright-link-bar .rc-ico img { width: 40px; height: 40px; }

/* ── Hero buttons ── */
.hero-btns .btn-gold .rc-ico img,
.hero-btns .btn-outline .rc-ico img { width: 20px !important; height: 20px !important; }

/* ── Placeholder for missing icons ── */
.ico-placeholder {
    display: inline-block;
    width: 44px; height: 44px;
    background: rgba(207,163,73,0.08);
    border-radius: 4px;
    flex-shrink: 0;
}
.ico-placeholder.ico-sm { width: 24px; height: 24px; }
.ico-placeholder.ico-lg { width: 64px; height: 64px; }

/* ── Avatar grid: 4 columns desktop ── */
.grid-avatar {
    grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 860px) {
    .grid-avatar { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 560px) {
    .grid-avatar { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Disable OLD sprite system completely ── */
.ico {
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    mix-blend-mode: normal !important;
    filter: none !important;
}



.avatar-card img,
.avatar-card,
.avatar-card *,
.rhino-card img,
.rhino-card,
.rhino-card *,
[class*="avatar"] img,
[class*="rhino"] img,
[class*="card"] img {
  background: transparent !important;
  background-color: transparent !important;
}

img {
  background: transparent !important;
}

/* ── Prevent rhinoshield from rendering at full PNG size ── */
.rc-ico img[src*="RC_01_rhino_shield"],
.rc-ico img[src*="logo.png"] {
    max-width: 64px;
    max-height: 64px;
}

/* ── Token card icons: consistent size ── */
.tok-card .rc-ico img { width: 48px; height: 48px; }