/* ============================================================
   Friendometer — pixel-icons.css
   Pixelarticons (800+ hand-crafted 24x24 pixel icons) via CDN.
   MIT license — no dependencies. Rendered as CSS backgrounds.
   ============================================================ */

.pixel-icon {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    flex-shrink: 0;
    filter: brightness(0) invert(1); /* make SVGs white for dark theme */
}

/* Color overrides for specific icon types */
.pixel-icon-check { filter: none; }  /* keep green-ish */
.pixel-icon-cross { filter: none; }  /* keep red-ish */

/* ── Pixelarticons CDN icons ── */
.pixel-icon-gamepad    { background-image: url("https://unpkg.com/pixelarticons@1.8.1/svg/gamepad.svg"); }
.pixel-icon-key        { background-image: url("https://unpkg.com/pixelarticons@1.8.1/svg/lock.svg"); }
.pixel-icon-pencil     { background-image: url("https://unpkg.com/pixelarticons@1.8.1/svg/edit.svg"); }
.pixel-icon-camera     { background-image: url("https://unpkg.com/pixelarticons@1.8.1/svg/camera.svg"); }
.pixel-icon-bulb       { background-image: url("https://unpkg.com/pixelarticons@1.8.1/svg/lightbulb.svg"); }
.pixel-icon-check      { background-image: url("https://unpkg.com/pixelarticons@1.8.1/svg/check.svg"); }
.pixel-icon-cross      { background-image: url("https://unpkg.com/pixelarticons@1.8.1/svg/close.svg"); }
.pixel-icon-play       { background-image: url("https://unpkg.com/pixelarticons@1.8.1/svg/play.svg"); }
.pixel-icon-arrow-left { background-image: url("https://unpkg.com/pixelarticons@1.8.1/svg/arrow-left.svg"); }
.pixel-icon-trash      { background-image: url("https://unpkg.com/pixelarticons@1.8.1/svg/trash.svg"); }
.pixel-icon-party      { background-image: url("https://unpkg.com/pixelarticons@1.8.1/svg/gift.svg"); }
.pixel-icon-hand       { background-image: url("https://unpkg.com/pixelarticons@1.8.1/svg/hand.svg"); }

/* ── Custom 8x8 SVGs for icons not in Pixelarticons ── */
.pixel-icon-star {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><rect x="4" y="0" width="1" height="1" fill="%23f7d51d"/><rect x="3" y="1" width="3" height="1" fill="%23f7d51d"/><rect x="1" y="2" width="7" height="1" fill="%23f7d51d"/><rect x="2" y="3" width="5" height="1" fill="%23f7d51d"/><rect x="3" y="4" width="3" height="1" fill="%23f7d51d"/><rect x="1" y="5" width="2" height="1" fill="%23f7d51d"/><rect x="6" y="5" width="2" height="1" fill="%23f7d51d"/></svg>');
}
.pixel-icon-question {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><rect x="2" y="1" width="4" height="1" fill="%23f7d51d"/><rect x="5" y="2" width="1" height="2" fill="%23f7d51d"/><rect x="3" y="4" width="2" height="1" fill="%23f7d51d"/><rect x="3" y="6" width="2" height="1" fill="%23f7d51d"/></svg>');
}
.pixel-icon-users {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><rect x="2" y="0" width="2" height="1" fill="%23209cee"/><rect x="1" y="1" width="3" height="1" fill="%23209cee"/><rect x="2" y="2" width="3" height="1" fill="%23209cee"/><rect x="1" y="3" width="4" height="1" fill="%23209cee"/><rect x="0" y="4" width="6" height="1" fill="%23209cee"/><rect x="5" y="2" width="1" height="1" fill="%23209cee"/><rect x="6" y="1" width="1" height="1" fill="%23209cee"/></svg>');
}

/* Sizes */
.pixel-icon.is-small  { width: 0.8em; height: 0.8em; }
.pixel-icon.is-medium { width: 1.6em; height: 1.6em; }
.pixel-icon.is-large  { width: 2.2em; height: 2.2em; }

/* Alignment with text in buttons */
.nes-btn .pixel-icon { margin-right: 0.15em; }