/* snk-reward-chips.css — shared reward-chip component.
   Extracted from p-events-bekijken.php:156-475 (was inline). Loaded by /codes;
   events still uses its inline copy (can migrate here later). Dark overrides
   de-scoped from so they apply on any page that loads this file. */
        /* === Unified reward chip ===
           Used for items, Pokémon, points so a row of mixed rewards reads as
           one consistent set. Stacked value+label design with Snacknap palette. */
        .reward-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--snk-surface-3);
            border: 1px solid var(--snk-border-strong);
            border-radius: 14px;
            padding: 4px 12px 4px 4px;
            line-height: 1.15;
            white-space: nowrap;
            vertical-align: middle;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .reward-chip:hover { border-color: var(--snk-slate-300); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
        .reward-chip .reward-chip-iconwrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--snk-surface);
            flex: 0 0 auto;
            /* Visible so the shiny indicator at top:-3/right:-3 isn't clipped. */
            overflow: visible;
            padding: 2px;
            position: relative;
        }
        .reward-chip img.reward-chip-icon {
            width: 100%;
            height: 100%;
            object-fit: contain;       /* prevents PNG distortion */
            display: block;
        }
        .reward-chip .reward-chip-body {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            gap: 1px;
        }
        .reward-chip .reward-chip-value {
            font-weight: 700;
            color: var(--snk-accent);  /* Snacknap dark primary -> accent token (flips in dark) */
            font-size: 14px;
            letter-spacing: -0.02em;
        }
        .reward-chip .reward-chip-label {
            font-size: 10px;
            color: var(--snk-slate);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            font-weight: 600;
        }
        /* Medium chip = step / completion rewards */
        .reward-chip-md { padding: 5px 14px 5px 5px; border-radius: 16px; }
        .reward-chip-md .reward-chip-value { font-size: 15.5px; }
        .reward-chip-md .reward-chip-label { font-size: 10.5px; }

        /* Pokémon chip — soft indigo tint to set it apart from items */
        .reward-chip-pokemon { background: color-mix(in srgb, var(--snk-accent) 10%, var(--snk-surface)); border-color: color-mix(in srgb, var(--snk-accent) 28%, var(--snk-surface)); }

        /* Buff / progression reward chip — icon + free-text label, no numeric
           value (e.g. "+1 Candy XL from raids", "½ Egg Hatch Distance"). The label
           is the primary content, so it reads sentence-case, a touch larger, and
           wraps instead of forcing the chip onto one long single line. */
        .reward-chip-buff { white-space: normal; max-width: 260px; }
        .reward-chip-buff .reward-chip-label {
            font-size: 11.5px;
            text-transform: none;
            letter-spacing: 0;
            font-weight: 600;
            color: var(--snk-ink-700);
            line-height: 1.2;
        }

        /* Species-bound item chip (candy / Mega Energy OF a species) — the item icon
           is primary, the species mini-sprite sits as a corner badge, and there is NO
           CP, so "10 Heatran Candy XL" never reads as a Heatran encounter. */
        .reward-chip-species { white-space: normal; }
        .reward-chip-species .reward-chip-iconwrap { overflow: visible; }
        .reward-chip-species .reward-chip-species-mark {
            position: absolute;
            bottom: -5px;
            right: -6px;
            width: 19px;
            height: 19px;
            border-radius: 50%;
            background: var(--snk-surface);
            border: 1.5px solid var(--snk-surface);
            box-shadow: 0 0 0 1px var(--snk-border-strong);
            object-fit: contain;
        }
        .reward-chip-species .reward-chip-label { text-transform: none; letter-spacing: 0; font-size: 10.5px; }
        .reward-chip-pokemon .reward-chip-iconwrap { background: var(--snk-surface); position: relative; }
        .reward-chip-pokemon .reward-chip-value { display: none; }     /* name carries the meaning */
        .reward-chip-pokemon .reward-chip-label {
            color: var(--snk-accent);
            font-size: 12px;
            text-transform: none;
            letter-spacing: 0;
            font-weight: 600;
        }

        /* Shiny indicator — gold accent on chip + star mark in icon corner.
           Subtle but distinct so curators and visitors see at-a-glance which
           reward Pokémon is the shiny variant. */
        .reward-chip-pokemon.is-shiny {
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
            border-color: #f59e0b;
            box-shadow: 0 0 0 1px rgba(245,158,11,.25);
        }
        .reward-chip-pokemon.is-shiny .reward-chip-iconwrap {
            background: #fffbeb;
            box-shadow: inset 0 0 0 1.5px #fcd34d;
        }
        .reward-chip-pokemon.is-shiny .reward-chip-label {
            color: #92400e;
        }
        /* Shiny indicator — canonical is_shiny-dark.png placed in icon-wrap corner */
        .reward-chip-shiny-mark {
            position: absolute;
            top: -3px;
            right: -3px;
            width: 14px;
            height: 14px;
            background: #fcd34d;
            border-radius: 50%;
            padding: 2px;
            box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 0 0 1.5px #fff;
            object-fit: contain;
            pointer-events: none;
        }
        .reward-chip-md .reward-chip-shiny-mark { width: 16px; height: 16px; top: -4px; right: -4px; }

        /* Chance-at-shiny — NORMAL sprite + outlined star (not the solid gold of a
           guaranteed shiny). Subtle gold hint so it reads as "possible shiny". */
        .reward-chip-pokemon.is-shiny-chance {
            border-color: #fcd34d;
            box-shadow: 0 0 0 1px rgba(245,158,11,.28);
        }
        .reward-chip-pokemon.is-shiny-chance .reward-chip-iconwrap {
            box-shadow: inset 0 0 0 1.5px #fde68a;
        }
        .reward-chip-shiny-mark.is-chance {
            background: #fff;
            box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 0 0 1.5px #f59e0b;
        }

        /* Special-background marker on a reward Pokémon chip — bottom-right corner
           (never collides with shiny top-right or Max top-left). */
        .reward-chip-bg-mark {
            position: absolute;
            bottom: -3px; right: -3px;
            width: 15px; height: 15px;
            background: #fff;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 0 0 1.5px #fff;
            pointer-events: none;
        }
        .reward-chip-bg-mark svg { width: 10px; height: 10px; display: block; }
        .reward-chip-bg-mark.pkmn-bg-special  { color: #3b82f6; }
        .reward-chip-bg-mark.pkmn-bg-location { color: #0ea5e9; }
        .reward-chip-md .reward-chip-bg-mark { width: 17px; height: 17px; bottom: -4px; right: -4px; }
        .reward-chip-md .reward-chip-bg-mark svg { width: 11px; height: 11px; }

        /* Dynamax / Gigantamax indicator — Dynamax-red energy tint on the chip +
           the site's canonical tag glyph in the icon corner. Mirrors the shiny
           treatment so curators and visitors read the Max-state at-a-glance.
           A chip can be both shiny and Max (gold gradient wins; red ring + glyph
           still mark the Max-state). */
        .reward-chip-pokemon.is-dmax,
        .reward-chip-pokemon.is-gmax {
            background: linear-gradient(135deg, #fee2e2 0%, #fecdd3 100%);
            border-color: #ef4444;
            box-shadow: 0 0 0 1px rgba(239,68,68,.25);
        }
        .reward-chip-pokemon.is-gmax {
            background: linear-gradient(135deg, #fde2e4 0%, #f9c5d1 100%);
            border-color: #db2777;
            box-shadow: 0 0 0 1px rgba(219,39,119,.25);
        }
        .reward-chip-pokemon.is-dmax .reward-chip-iconwrap,
        .reward-chip-pokemon.is-gmax .reward-chip-iconwrap {
            background: #fff5f5;
            box-shadow: inset 0 0 0 1.5px #fca5a5;
        }
        .reward-chip-pokemon.is-gmax .reward-chip-iconwrap {
            box-shadow: inset 0 0 0 1.5px #f9a8d4;
        }
        .reward-chip-pokemon.is-dmax .reward-chip-label,
        .reward-chip-pokemon.is-gmax .reward-chip-label { color: #b91c1c; }
        .reward-chip-pokemon.is-gmax .reward-chip-label { color: #be185d; }
        .reward-chip-pokemon.is-dmax .reward-chip-cp,
        .reward-chip-pokemon.is-gmax .reward-chip-cp { color: #b91c1c; }
        /* Max glyph mark — mirrors .reward-chip-shiny-mark placement (top-left so it
           never collides with a shiny star in the top-right corner). */
        .reward-chip-max-mark {
            position: absolute;
            top: -3px;
            left: -3px;
            width: 15px;
            height: 15px;
            background: #fff;
            border-radius: 50%;
            padding: 2px;
            box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 0 0 1.5px #ef4444;
            object-fit: contain;
            pointer-events: none;
        }
        .reward-chip-pokemon.is-gmax .reward-chip-max-mark { box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 0 0 1.5px #db2777; }
        .reward-chip-md .reward-chip-max-mark { width: 17px; height: 17px; top: -4px; left: -4px; }

        /* Research-encounter CP range under the Pokémon name */
        .reward-chip-pokemon .reward-chip-cp {
            font-size: 9.5px;
            font-weight: 700;
            color: var(--snk-ink-600);
            letter-spacing: .01em;
            text-transform: none;
            line-height: 1.05;
            margin-top: 1px;
        }
        .reward-chip-pokemon .reward-chip-cp-lbl { color: var(--snk-slate-400); font-weight: 800; font-size: 8.5px; }
        .reward-chip-md .reward-chip-cp { font-size: 10.5px; }
        .reward-chip-pokemon.is-shiny .reward-chip-cp { color: #92400e; }
        .reward-chip-pokemon.is-shiny .reward-chip-cp-lbl { color: #b45309; }

        /* Points chip (GO Pass) */
        .reward-chip-points { background: color-mix(in srgb, var(--snk-accent) 8%, transparent); border-color: color-mix(in srgb, var(--snk-accent) 25%, transparent); }
        .reward-chip-points .reward-chip-iconwrap { background: var(--snk-accent); color: #fff; }
        .reward-chip-points .reward-chip-iconwrap .reward-chip-pts-mark {
            font-weight: 700; font-size: 11px; letter-spacing: 0.3px;
        }
        .reward-chip-points .reward-chip-value { color: var(--snk-accent); }

        /* Bonus-*.webp pictograms are white-on-transparent; invert them so they
           read as dark icons on the light chip backdrop. */
        .reward-chip img.reward-chip-icon[src*="/assets/img/bonus-"] { filter: invert(1); }

/* ===== dark-mode overrides (de-scoped) ===== */
        html[data-bs-theme=dark] .reward-chip img.reward-chip-icon[src*="/assets/img/bonus-"] { filter: none; }
        html[data-bs-theme=dark] .reward-chip-pokemon.is-shiny .reward-chip-iconwrap{background:linear-gradient(135deg, color-mix(in srgb,#f0a92e 14%, var(--snk-surface)), color-mix(in srgb,#f0a92e 22%, var(--snk-surface)));}
        /* is-shiny-chance iconwrap: plain dark surface-2 (was #fff) */
        html[data-bs-theme=dark] .reward-chip-pokemon.is-shiny-chance .reward-chip-iconwrap{background:var(--snk-surface-2);}
        /* is-dmax / is-gmax iconwrap: was #fff5f5 light rose — use dark surface-2 */
        html[data-bs-theme=dark] .reward-chip-pokemon.is-dmax .reward-chip-iconwrap,
        html[data-bs-theme=dark] .reward-chip-pokemon.is-gmax .reward-chip-iconwrap{background:var(--snk-surface-2);}
        html[data-bs-theme=dark] .reward-chip-shiny-mark{filter:none;}
        html[data-bs-theme=dark] .reward-chip-shiny-mark.is-chance{background:#fff;}
        /* .reward-chip-bg-mark: was background:#fff — dark surface-2 */
        html[data-bs-theme=dark] .reward-chip-bg-mark{background:var(--snk-surface-2);}
        /* .reward-chip-max-mark: was background:#fff — dark surface-2 */
        html[data-bs-theme=dark] .reward-chip-max-mark{background:var(--snk-surface-2);}
        html[data-bs-theme=dark] .reward-chip-pokemon.is-gmax .reward-chip-label,
        html[data-bs-theme=dark] .reward-chip-pokemon.is-gmax .reward-chip-cp{color:#f3789b;}
        /* is-dmax label + cp also used dark red #b91c1c -> use snk-danger */
        html[data-bs-theme=dark] .reward-chip-pokemon.is-dmax .reward-chip-label,
        html[data-bs-theme=dark] .reward-chip-pokemon.is-dmax .reward-chip-cp{color:var(--snk-danger);}
        /* is-shiny cp (#92400e) and cp-lbl (#b45309) -> warm amber */
        html[data-bs-theme=dark] .reward-chip-pokemon.is-shiny .reward-chip-cp{color:var(--snk-warning);}
        html[data-bs-theme=dark] .reward-chip-pokemon.is-shiny .reward-chip-cp-lbl{color:#e0a96a;}
        /* is-shiny label (#92400e dark amber) -> readable amber-200 */
        html[data-bs-theme=dark] .reward-chip-pokemon.is-shiny .reward-chip-label{color:#fbbf60;}