/* Pixel-art icons: pixelarticons (MIT, https://github.com/halfmage/pixelarticons) drawn
   through the existing Bootstrap Icons class names, so templates keep using `bi bi-xxx`.
   The glyphs are drawn on a 24px grid: keep font sizes at multiples of 24px for crisp pixels. */
@font-face {
    font-family: "pixelart-icons-font";
    src: url("../fonts/pixelart-icons-font.woff2") format("woff2");
    font-display: block;
}

.bi {
    display: inline-block;
    font-size: 24px;
    font-style: normal;
    line-height: 1;
    vertical-align: middle;
    /* the 24px box must not make the text line taller */
    margin-block: -0.25em;
    position: relative;
    top: -2px; /* optical centering against the text next to it */
}

.bi::before {
    display: inline-block;
    font-family: "pixelart-icons-font" !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 1;
    text-transform: none;
    vertical-align: top;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: auto;
}

.bi-dpad-fill::before { content: "\edc3"; }
.bi-dpad::before { content: "\ecd3"; }
.bi-trash-fill::before { content: "\edbe"; }
.bi-joystick::before { content: "\ec0d"; }
.bi-controller::before { content: "\ebb5"; }
.bi-star-fill::before { content: "\ed6d"; }
/* the font only has an outline heart: the filled one (a heart given, the footer) is the same shape as a mask,
   so it takes the text colour and reads on any theme without relying on a colour change */
.bi-heart-fill::before {
    content: "";
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%202h4v1h-4zM15%202h4v1h-4zM5%203h4v1h-4zM15%203h4v1h-4zM3%204h8v1h-8zM13%204h8v1h-8zM3%205h8v1h-8zM13%205h8v1h-8zM1%206h22v1h-22zM1%207h22v1h-22zM1%208h22v1h-22zM1%209h22v1h-22zM1%2010h22v1h-22zM1%2011h22v1h-22zM3%2012h18v1h-18zM3%2013h18v1h-18zM5%2014h14v1h-14zM5%2015h14v1h-14zM7%2016h10v1h-10zM7%2017h10v1h-10zM9%2018h6v1h-6zM9%2019h6v1h-6zM11%2020h2v1h-2zM11%2021h2v1h-2z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%202h4v1h-4zM15%202h4v1h-4zM5%203h4v1h-4zM15%203h4v1h-4zM3%204h8v1h-8zM13%204h8v1h-8zM3%205h8v1h-8zM13%205h8v1h-8zM1%206h22v1h-22zM1%207h22v1h-22zM1%208h22v1h-22zM1%209h22v1h-22zM1%2010h22v1h-22zM1%2011h22v1h-22zM3%2012h18v1h-18zM3%2013h18v1h-18zM5%2014h14v1h-14zM5%2015h14v1h-14zM7%2016h10v1h-10zM7%2017h10v1h-10zM9%2018h6v1h-6zM9%2019h6v1h-6zM11%2020h2v1h-2zM11%2021h2v1h-2z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.bi-heart::before { content: "\ebe7"; }
.bi-chat-fill::before { content: "\eb3f"; }
.bi-tv-fill::before { content: "\edc7"; }
.bi-tv::before { content: "\edc7"; }
.bi-card-text::before { content: "\eaf5"; }
.bi-box-arrow-in-right::before { content: "\ec6e"; }
.bi-people-fill::before { content: "\ede1"; }
.bi-bar-chart-fill::before { content: "\eb02"; }
.bi-x::before { content: "\eb30"; }
.bi-quote::before { content: "\ecea"; }
.bi-person-badge-fill::before { content: "\eddf"; }
.bi-pencil-fill::before { content: "\ecc5"; }
.bi-newspaper::before { content: "\ea7e"; }
.bi-list-ul::before { content: "\eadd"; }
.bi-link-45deg::before { content: "\ec5f"; }
.bi-graph-up-arrow::before { content: "\edc1"; }
.bi-graph-down-arrow::before { content: "\edc1"; }
.bi-gear-fill::before { content: "\ed24"; }
.bi-eye-fill::before { content: "\eb90"; }
.bi-exclamation-triangle-fill::before { content: "\edf6"; }
.bi-exclamation-diamond::before { content: "\edf6"; }
.bi-code-slash::before { content: "\eb35"; }
.bi-check-circle-fill::before { content: "\eb0a"; }
.bi-box-arrow-up-right::before { content: "\eb8e"; }
.bi-bell-fill::before { content: "\eab2"; }
.bi-bell::before { content: "\eab4"; }

/* variants that only exist as one glyph */
.bi-graph-down-arrow::before { transform: scaleY(-1); }
.bi-tv::before { opacity: 0.5; }

/* no bold / italic glyphs in the set: use letters in the pixel font */
.bi-type-bold::before,
.bi-type-italic::before {
    font-family: "Tiny5", sans-serif !important;
    font-size: 1em;
}
.bi-type-bold::before { content: "B"; }
.bi-type-italic::before { content: "I"; }

/* larger text next to the icon: nudge a bit more */
.review-status-date .bi {
    top: -3px;
}

/* icons next to the big metric numbers */
.metric-icon .bi {
    top: -5px;
}

/* names used by the icons typed in the markdown descriptions of games (they were lost with the pixel set) */
.bi-clipboard::before, .bi-px-clipboard::before { content: "\eb2e"; }
.bi-book::before { content: "\eabc"; }
.bi-clock::before { content: "\eb2f"; }
.bi-star::before { content: "\ed6d"; }
.bi-link::before, .bi-px-link::before { content: "\ec5f"; }
.bi-discord::before, .bi-px-discord::before { content: "\eb74"; }
.bi-cloud-arrow-down::before, .bi-px-download::before { content: "\eb7f"; }

/* extra pixel icons, used as `bi bi-px-NAME` (badges...) and the spoiler button */
.bi-eye-slash-fill::before { content: "\eb8f"; }
.bi-px-eye-off::before { content: "\eb8f"; }
.bi-px-crown::before { content: "\eb65"; }
.bi-px-fire::before { content: "\eb9e"; }
.bi-px-sword::before { content: "\ed81"; }
.bi-px-zap::before { content: "\ee0a"; }
.bi-px-flag::before { content: "\eba0"; }
.bi-px-target::before { content: "\ed8a"; }
.bi-px-trophy::before { content: "\edc3"; }
.bi-px-book-open::before { content: "\eabc"; }
.bi-px-calendar::before { content: "\eaed"; }
.bi-px-coffee::before { content: "\eb37"; }
.bi-px-shield::before { content: "\ed29"; }
.bi-px-diamond-gem::before { content: "\eb70"; }
.bi-px-lock::before { content: "\ec6c"; }
.bi-px-user::before { content: "\eddf"; }
.bi-px-comment::before { content: "\eb3f"; }
.bi-px-message-text::before { content: "\ec92"; }
.bi-px-heart::before { content: "\ebe7"; }
.bi-px-joystick::before { content: "\ec0d"; }
.bi-px-gamepad::before { content: "\ebb5"; }
.bi-px-star::before { content: "\ed6d"; }
.bi-px-trash::before { content: "\edbe"; }
.bi-px-pencil::before { content: "\ecc5"; }
.bi-px-notebook::before { content: "\ecb3"; }
.bi-px-users::before { content: "\ede1"; }
.bi-px-menu::before { content: "\ec8b"; }
.bi-px-play::before { content: "\ecd3"; }
.bi-px-article::before { content: "\ea7e"; }
.bi-px-clock::before { content: "\eb2f"; }
.bi-px-sparkles::before { content: "\ed4d"; }
.bi-px-t-rex::before { content: "\ed84"; }
.bi-px-monitor::before { content: "\eca0"; }