/**
 * Mana Font - Optimized subset for card search
 * Contains only the symbols used in the application
 *
 * Original font: https://github.com/andrewgioia/mana
 * Version: 1.12.3
 */

@font-face {
  font-family: "Mana";
  src: url('https://d1hot9ps2xugbc.cloudfront.net/cdn/fonts/mana/mana-subset.woff2') format('woff2'),
       url('https://d1hot9ps2xugbc.cloudfront.net/cdn/fonts/mana/mana-subset.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Base mana symbol styles */
.ms {
  display: inline-block;
  font: normal normal normal 14px Mana;
  font-size: inherit;
  line-height: 1em;
  text-rendering: auto;
  transform: translate(0, 0);
  speak: none;
  text-transform: none;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --ms-mana-b: #a7999e;
  --ms-mana-c: #d0c6bb;
  --ms-mana-g: #9fcba6;
  --ms-mana-r: #f19b79;
  --ms-mana-u: #bcdaf7;
  --ms-mana-w: #fdfbce;
}

/* Individual symbol content codes */
.ms-w::before {
  content: "\e600";
}
.ms-u::before {
  content: "\e601";
}
.ms-b::before {
  content: "\e602";
}
.ms-r::before {
  content: "\e603";
}
.ms-g::before {
  content: "\e604";
}
.ms-0::before {
  content: "\e605";
}
.ms-1::before {
  content: "\e606";
}
.ms-2 {
  margin-left: inherit !important;
}
.ms-2::before {
  content: "\e607";
}
.ms-3::before {
  content: "\e608";
}
.ms-4::before {
  content: "\e609";
}
.ms-5::before {
  content: "\e60a";
}
.ms-6::before {
  content: "\e60b";
}
.ms-7::before {
  content: "\e60c";
}
.ms-8::before {
  content: "\e60d";
}
.ms-9::before {
  content: "\e60e";
}
.ms-10::before {
  content: "\e60f";
}
.ms-11::before {
  content: "\e610";
}
.ms-12::before {
  content: "\e611";
}
.ms-13::before {
  content: "\e612";
}
.ms-14::before {
  content: "\e613";
}
.ms-15::before {
  content: "\e614";
}
.ms-16::before {
  content: "\e62a";
}
.ms-x::before {
  content: "\e615";
}
.ms-y::before {
  content: "\e616";
}
.ms-z::before {
  content: "\e617";
}
.ms-s::before {
  content: "\e619";
}
.ms-c::before {
  content: "\e904";
}
.ms-e::before, .ms-energy::before {
  content: "\e907";
}
.ms-infinity::before {
  content: "\e903";
}
.ms-p::before {
  content: "\e618";
}
.ms-tap::before {
  content: "\e61a";
}
.ms-untap::before {
  content: "\e61b";
}
.ms-chaos::before {
  content: "\e61d";
}
.ms-planeswalker::before {
  content: "\e623";
}

/* Hybrid mana - uses ::before and ::after for split symbols */
.ms-wu::before, .ms-wb::before, .ms-rw::after, .ms-gw::after, .ms-2w::after {
  content: "\e600";
}
.ms-ub::before, .ms-ur::before, .ms-wu::after, .ms-gu::after, .ms-2u::after {
  content: "\e601";
}
.ms-br::before, .ms-bg::before, .ms-wb::after, .ms-ub::after, .ms-2b::after {
  content: "\e602";
}
.ms-rw::before, .ms-rg::before, .ms-ur::after, .ms-br::after, .ms-2r::after {
  content: "\e603";
}
.ms-gw::before, .ms-gu::before, .ms-bg::after, .ms-rg::after, .ms-2g::after {
  content: "\e604";
}
.ms-2w::before, .ms-2u::before, .ms-2b::before, .ms-2r::before, .ms-2g::before {
  content: "\e607";
}
.ms-wp::before, .ms-up::before, .ms-bp::before, .ms-rp::before, .ms-gp::before, .ms-wup::before, .ms-wup::after, .ms-wbp::before, .ms-wbp::after, .ms-ubp::before, .ms-ubp::after, .ms-urp::before, .ms-urp::after, .ms-brp::before, .ms-brp::after, .ms-bgp::before, .ms-bgp::after, .ms-rwp::before, .ms-rwp::after, .ms-rgp::before, .ms-rgp::after, .ms-gwp::before, .ms-gwp::after, .ms-gup::before, .ms-gup::after {
  content: "\e618";
}

/* Cost styling */
.ms-cost {
  background-color: #beb9b2;
  border-radius: 1em;
  color: #111;
  font-size: 0.95em;
  width: 1.3em;
  height: 1.3em;
  line-height: 1.35em;
  text-align: center;
}
.ms-cost.ms-w, .ms-cost.ms-wp {
  background-color: #f0f2c0;
}
.ms-cost.ms-u, .ms-cost.ms-up {
  background-color: #b5cde3;
}
.ms-cost.ms-b, .ms-cost.ms-bp {
  background-color: #aca29a;
}
.ms-cost.ms-r, .ms-cost.ms-rp {
  background-color: #db8664;
}
.ms-cost.ms-g, .ms-cost.ms-gp {
  background-color: #93b483;
}
.ms-cost.ms-wu, .ms-cost.ms-wb, .ms-cost.ms-ub, .ms-cost.ms-ur, .ms-cost.ms-br, .ms-cost.ms-bg, .ms-cost.ms-rw, .ms-cost.ms-rg, .ms-cost.ms-gw, .ms-cost.ms-gu, .ms-cost.ms-2w, .ms-cost.ms-2u, .ms-cost.ms-2b, .ms-cost.ms-2r, .ms-cost.ms-2g, .ms-cost.ms-wup, .ms-cost.ms-wbp, .ms-cost.ms-ubp, .ms-cost.ms-urp, .ms-cost.ms-brp, .ms-cost.ms-bgp, .ms-cost.ms-rwp, .ms-cost.ms-rgp, .ms-cost.ms-gwp, .ms-cost.ms-gup {
  --ms-split-top: var(--ms-mana-c);
  --ms-split-bottom: var(--ms-mana-u);
  background: var(--ms-split-top);
  background: -moz-linear-gradient(135deg, var(--ms-split-top) 0%, var(--ms-split-top) 50%, var(--ms-split-bottom) 50%, var(--ms-split-bottom) 100%);
  background: -webkit-linear-gradient(135deg, var(--ms-split-top) 0%, var(--ms-split-top) 50%, var(--ms-split-bottom) 50%, var(--ms-split-bottom) 100%);
  background: linear-gradient(135deg, var(--ms-split-top) 0%, var(--ms-split-top) 50%, var(--ms-split-bottom) 50%, var(--ms-split-bottom) 100%);
  position: relative;
  width: 1.3em;
  height: 1.3em;
}
.ms-cost.ms-wu::before, .ms-cost.ms-wu::after, .ms-cost.ms-wb::before, .ms-cost.ms-wb::after, .ms-cost.ms-ub::before, .ms-cost.ms-ub::after, .ms-cost.ms-ur::before, .ms-cost.ms-ur::after, .ms-cost.ms-br::before, .ms-cost.ms-br::after, .ms-cost.ms-bg::before, .ms-cost.ms-bg::after, .ms-cost.ms-rw::before, .ms-cost.ms-rw::after, .ms-cost.ms-rg::before, .ms-cost.ms-rg::after, .ms-cost.ms-gw::before, .ms-cost.ms-gw::after, .ms-cost.ms-gu::before, .ms-cost.ms-gu::after, .ms-cost.ms-2w::before, .ms-cost.ms-2w::after, .ms-cost.ms-2u::before, .ms-cost.ms-2u::after, .ms-cost.ms-2b::before, .ms-cost.ms-2b::after, .ms-cost.ms-2r::before, .ms-cost.ms-2r::after, .ms-cost.ms-2g::before, .ms-cost.ms-2g::after, .ms-cost.ms-wup::before, .ms-cost.ms-wup::after, .ms-cost.ms-wbp::before, .ms-cost.ms-wbp::after, .ms-cost.ms-ubp::before, .ms-cost.ms-ubp::after, .ms-cost.ms-urp::before, .ms-cost.ms-urp::after, .ms-cost.ms-brp::before, .ms-cost.ms-brp::after, .ms-cost.ms-bgp::before, .ms-cost.ms-bgp::after, .ms-cost.ms-rwp::before, .ms-cost.ms-rwp::after, .ms-cost.ms-rgp::before, .ms-cost.ms-rgp::after, .ms-cost.ms-gwp::before, .ms-cost.ms-gwp::after, .ms-cost.ms-gup::before, .ms-cost.ms-gup::after {
  font-size: 0.55em !important;
  position: absolute;
}
.ms-cost.ms-wu::before, .ms-cost.ms-wb::before, .ms-cost.ms-ub::before, .ms-cost.ms-ur::before, .ms-cost.ms-br::before, .ms-cost.ms-bg::before, .ms-cost.ms-rw::before, .ms-cost.ms-rg::before, .ms-cost.ms-gw::before, .ms-cost.ms-gu::before, .ms-cost.ms-2w::before, .ms-cost.ms-2u::before, .ms-cost.ms-2b::before, .ms-cost.ms-2r::before, .ms-cost.ms-2g::before, .ms-cost.ms-wup::before, .ms-cost.ms-wbp::before, .ms-cost.ms-ubp::before, .ms-cost.ms-urp::before, .ms-cost.ms-brp::before, .ms-cost.ms-bgp::before, .ms-cost.ms-rwp::before, .ms-cost.ms-rgp::before, .ms-cost.ms-gwp::before, .ms-cost.ms-gup::before {
  top: -0.38em;
  left: 0.28em;
}
.ms-cost.ms-wu::after, .ms-cost.ms-wb::after, .ms-cost.ms-ub::after, .ms-cost.ms-ur::after, .ms-cost.ms-br::after, .ms-cost.ms-bg::after, .ms-cost.ms-rw::after, .ms-cost.ms-rg::after, .ms-cost.ms-gw::after, .ms-cost.ms-gu::after, .ms-cost.ms-2w::after, .ms-cost.ms-2u::after, .ms-cost.ms-2b::after, .ms-cost.ms-2r::after, .ms-cost.ms-2g::after, .ms-cost.ms-wup::after, .ms-cost.ms-wbp::after, .ms-cost.ms-ubp::after, .ms-cost.ms-urp::after, .ms-cost.ms-brp::after, .ms-cost.ms-bgp::after, .ms-cost.ms-rwp::after, .ms-cost.ms-rgp::after, .ms-cost.ms-gwp::after, .ms-cost.ms-gup::after {
  top: 0.5em;
  left: 1em;
}
.ms-cost.ms-wu, .ms-cost.ms-wup {
  --ms-split-top: var(--ms-mana-w);
}
.ms-cost.ms-wb, .ms-cost.ms-wbp {
  --ms-split-top: var(--ms-mana-w);
  --ms-split-bottom: var(--ms-mana-b);
}
.ms-cost.ms-ub, .ms-cost.ms-ubp {
  --ms-split-top: var(--ms-mana-u);
  --ms-split-bottom: var(--ms-mana-b);
}
.ms-cost.ms-ur, .ms-cost.ms-urp {
  --ms-split-top: var(--ms-mana-u);
  --ms-split-bottom: var(--ms-mana-r);
}
.ms-cost.ms-br, .ms-cost.ms-brp {
  --ms-split-top: var(--ms-mana-b);
  --ms-split-bottom: var(--ms-mana-r);
}
.ms-cost.ms-bg, .ms-cost.ms-bgp {
  --ms-split-top: var(--ms-mana-b);
  --ms-split-bottom: var(--ms-mana-g);
}
.ms-cost.ms-rw, .ms-cost.ms-rwp {
  --ms-split-top: var(--ms-mana-r);
  --ms-split-bottom: var(--ms-mana-w);
}
.ms-cost.ms-rg, .ms-cost.ms-rgp {
  --ms-split-top: var(--ms-mana-r);
  --ms-split-bottom: var(--ms-mana-g);
}
.ms-cost.ms-gw, .ms-cost.ms-gwp {
  --ms-split-top: var(--ms-mana-g);
  --ms-split-bottom: var(--ms-mana-w);
}
.ms-cost.ms-gu, .ms-cost.ms-gup {
  --ms-split-top: var(--ms-mana-g);
}
.ms-cost.ms-2w {
  --ms-split-bottom: var(--ms-mana-w);
}
.ms-cost.ms-2b {
  --ms-split-bottom: var(--ms-mana-b);
}
.ms-cost.ms-2r {
  --ms-split-bottom: var(--ms-mana-r);
}
.ms-cost.ms-2g {
  --ms-split-bottom: var(--ms-mana-g);
}
.ms-cost.ms-p::before {
  display: inline-block;
  -moz-transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
}
.ms-cost.ms-wp::before, .ms-cost.ms-up::before, .ms-cost.ms-bp::before, .ms-cost.ms-rp::before, .ms-cost.ms-gp::before, .ms-cost.ms-wup::before, .ms-cost.ms-wbp::before, .ms-cost.ms-ubp::before, .ms-cost.ms-urp::before, .ms-cost.ms-brp::before, .ms-cost.ms-bgp::before, .ms-cost.ms-rwp::before, .ms-cost.ms-rgp::before, .ms-cost.ms-gwp::before, .ms-cost.ms-gup::before, .ms-cost.ms-wup::after, .ms-cost.ms-wbp::after, .ms-cost.ms-ubp::after, .ms-cost.ms-urp::after, .ms-cost.ms-brp::after, .ms-cost.ms-bgp::after, .ms-cost.ms-rwp::after, .ms-cost.ms-rgp::after, .ms-cost.ms-gwp::after, .ms-cost.ms-gup::after {
  display: inline-block;
  transform: scale(1.2) translateX(0.01rem) translateY(-0.03rem);
}
.ms-cost.ms-s::before {
  color: #fff;
  -webkit-text-stroke: 2px #fff;
  font-size: 0.85em;
  top: -0.05em;
  position: relative;
  display: inline-block;
}
.ms-cost.ms-s::after {
  content: "\e619";
  position: absolute;
  color: #333;
  margin-left: -0.9em;
  font-size: 1.1em;
}
.ms-cost.ms-untap {
  background-color: #111;
  color: #fff;
}
.ms-cost.ms-shadow {
  box-shadow: -0.06em 0.07em 0 #111, 0 0.06em 0 #111;
}
.ms-cost.ms-shadow.ms-untap {
  box-shadow: -0.06em 0.07em 0 #fff, 0 0.06em 0 #fff;
}

/* Split mana positioning */
.ms-split {
  position: relative;
  width: 1.3em;
  height: 1.3em;
}

.ms-split::before,
.ms-split::after {
  font-size: 0.55em !important;
  position: absolute;
}

.ms-split::before {
  top: -0.38em;
  left: 0.28em;
}

.ms-split::after {
  top: 0.5em;
  left: 1em;
}