.icon-128 {
    width: 128px;
    height: 128px;
}

.icon-32 {
    width: 32px;
    height: 32px;
}

.icon-24 {
    width: 24px;
    height: 24px;
}

.icon-16 {
    width: 16px;
    height: 16px;
}

span.icon-16, span.icon-24, span.icon-32 {
    display: inline-block;
}

.text-center .icon-24, .text-center .icon-32 {
    margin-left: auto;
    margin-right: auto;
}

/* ACTION TYPES */

.action-type {
    background: url("../img/icon/iconset-64x64.2865fb221eb0.png") no-repeat top left;
}

.icon-32.action-type {
    background-size: 672px 160px;
    background-position-x: 32px;
}

.icon-16.action-type {
    background-size: 336px 80px;
    background-position-x: 16px;
}

.icon-24.action-type {
    background-size: 504px 120px;
    background-position-x: 24px;
}

.icon-32.effect-filter {
    /* downscaled for hi res devices */
    background: url("../img/icon/effects-filter-64x64.a78ea089156a.png") no-repeat top left;
    background-size: 864px 288px;
    background-position-x: 0;
}

.icon-24.weapon-type {
    background: url("../img/icon/weapon-types-38x38.da9fd05ab17f.png") no-repeat top left;
    background-size: 120px 48px;
}

/* @Deprecated */
.icon-32.stars-filter {
    /* downscaled for hi res devices */
    background: url("../img/icon/5-stars-filter-round.38d2b17dc799.png") no-repeat top left;
    background-size: 32px 160px;
    background-position-x: 0;
    background-position-y: 0;
}

/* @Deprecated */
.stars-filter._lvl-1 {
    background-position-y: 25%;
}

/* @Deprecated */
.stars-filter._lvl-2 {
    background-position-y: 50%;
}

/* @Deprecated */
.stars-filter._lvl-3 {
    background-position-y: 75%;
}

/* @Deprecated */
.stars-filter._lvl-4 {
    background-position-y: 100%;
}

.effect-filter.bless {
    background-position-x: 0.0%;
}

.effect-filter.combo {
    background-position-x: calc(1% / 0.26);
}

.effect-filter.combo-detonator {
    background-position-x: calc(2% / 0.26);
}

.effect-filter.defense {
    background-position-x: calc(3% / 0.26);
}

.effect-filter.energy {
    background-position-x: calc(4% / 0.26);
}

.effect-filter.heal {
    background-position-x: calc(5% / 0.26);
}

.effect-filter.hero-attack {
    background-position-x: calc(6% / 0.26);
}

.effect-filter.permanent-attack {
    background-position-x: calc(7% / 0.26);
}

.effect-filter.universal-attack {
    background-position-x: calc(8% / 0.26);
}

.effect-filter.weapon-attack {
    background-position-x: calc(9% / 0.26);
}

.effect-filter.obliterate {
    background-position-x: calc(10% / 0.26);
}

.effect-filter.battle-trick {
    background-position-x: calc(11% / 0.26);
}

.effect-filter.green {
    background-position-x: calc(12% / 0.26);
}

.effect-filter.orange {
    background-position-x: calc(13% / 0.26);
}

.effect-filter.red {
    background-position-x: calc(14% / 0.26);
}

.effect-filter.roll-cost {
    background-position-x: calc(15% / 0.26);
}

.effect-filter.rarity {
    background-position-x: calc(16% / 0.26);
}

.effect-filter.curse-weapon {
    background-position-x: calc(17% / 0.26);
}

.effect-filter.night-attack {
    background-position-x: calc(18% / 0.26);
}

.effect-filter.vampire-bite {
    background-position-x: calc(19% / 0.26);
}

.effect-filter.island {
    background-position-x: calc(20% / 0.26);
}

.effect-filter.weapon {
    background-position-x: calc(21% / 0.26);
}

.effect-filter.weapon.sword {
    background-position-y: calc(0% / 0.08);
}

.effect-filter.weapon.sword.lvl-1 {
    background-position-y: calc(4% / 0.08);
}

.effect-filter.weapon.axe {
    background-position-y: calc(1% / 0.08);
}

.effect-filter.weapon.axe.lvl-1 {
    background-position-y: calc(5% / 0.08);
}

.effect-filter.weapon.bow {
    background-position-y: calc(2% / 0.08);
}

.effect-filter.weapon.bow.lvl-1 {
    background-position-y: calc(6% / 0.08);
}

.effect-filter.weapon.wand {
    background-position-y: calc(3% / 0.08);
}

.effect-filter.weapon.wand.lvl-1 {
    background-position-y: calc(7% / 0.08);
}

.effect-filter.mechanics-superaction {
    background-position-x: calc(22% / 0.26);
}

.effect-filter.zepplandian-shrapnel {
    background-position-x: calc(23% / 0.26);
}

.effect-filter.trap {
    background-position-x: calc(24% / 0.26);
}

.effect-filter.cumulus {
    background-position-x: calc(25% / 0.26);
}

.effect-filter.extra-coins {
    background-position-x: calc(26% / 0.26);
}

.effect-filter.lvl-1 {
    background-position-y: calc(1% / 0.08);
}

.effect-filter.lvl-2 {
    background-position-y: calc(2% / 0.08);
}

.effect-filter.lvl-3 {
    background-position-y: calc(3% / 0.08);
}

.effect-filter.lvl-4 {
    background-position-y: calc(4% / 0.08);
}

.effect-filter.lvl-5 {
    background-position-y: calc(5% / 0.08);
}

.effect-filter.lvl-6 {
    background-position-y: calc(6% / 0.08);
}

.effect-filter.lvl-7 {
    background-position-y: calc(7% / 0.08);
}

.effect-filter.lvl-8 {
    background-position-y: 100%;
}

.action-type.bless, .action-type._bless {
    background-position-x: 0.0%;
}

.action-type.combo, .action-type._combo {
    background-position-x: calc(1% / 0.20);
}

.action-type.combo-detonator, .action-type._combo-detonator {
    background-position-x: calc(2% / 0.20);
}

.action-type.defense, .action-type._defense {
    background-position-x: calc(3% / 0.20);
}

.action-type.energy, .action-type._energy {
    background-position-x: calc(4% / 0.20);
}

.action-type.heal, .action-type._heal {
    background-position-x: calc(5% / 0.20);
}

.action-type.hero-attack, .action-type._hero-attack {
    background-position-x: calc(6% / 0.20);
}

.action-type.permanent-attack, .action-type._permanent-attack {
    background-position-x: calc(7% / 0.20);
}

.action-type.universal-attack, .action-type._universal-attack {
    background-position-x: calc(8% / 0.20);
}

.action-type.weapon-attack, .action-type._weapon-attack {
    background-position-x: calc(9% / 0.20);
}

.action-type.obliterate, .action-type._obliterate {
    background-position-x: calc(10% / 0.20);
}

.action-type.battle-trick, .action-type._battle-trick {
    background-position-x: calc(11% / 0.20);
}

.action-type.curse-weapon, .action-type._curse-weapon {
    background-position-x: calc(12% / 0.20);
}

.action-type.night-attack, .action-type._night-attack {
    background-position-x: calc(13% / 0.20);
}

.action-type.vampire-bite, .action-type._vampire-bite {
    background-position-x: calc(14% / 0.20);
}

.action-type.health, .action-type._health {
    background-position-x: calc(15% / 0.20);
}

.action-type.mechanics-superaction, .action-type._mechanics-superaction {
    background-position-x: calc(16% / 0.20);
}

.action-type.zepplandian-shrapnel, .action-type._zepplandian-shrapnel, .action-type.zepplandian-shrapnel-2, .action-type._zepplandian-shrapnel-2 {
    background-position-x: calc(17% / 0.20);
}

.action-type.trap, .action-type._trap {
    background-position-x: calc(18% / 0.20);
}

.action-type.cumulus, .action-type._cumulus {
    background-position-x: calc(19% / 0.20);
}

.action-type.extra-coins, .action-type._extra-coins {
    background-position-x: calc(20% / 0.20);
}

.action-type.G {
    background-position-y: calc(1% / 0.04);
}

.action-type.O {
    background-position-y: calc(2% / 0.04);
}

.action-type.R {
    background-position-y: calc(3% / 0.04);
}

.action-type._used {
    background-position-y: calc(4% / 0.04);
}

.weapon-type.weapon-type-axe {
    background-position-x: 75%;
}

.weapon-type.weapon-type-sword {
    background-position-x: 50%;
}

.weapon-type.weapon-type-wand {
    background-position-x: 25%;
}

.weapon-type.weapon-type-bow {
    background-position-x: 100%;
}

/* STARS */

.stars {
    width: 56px;
    height: 16px;
    background: url("../img/icon/5-stars-x32.477056223b3e.png") no-repeat top left;
    background-size: 100%;
}

.stars.s-1 {
    background-position-y: -64px;
}

.stars.s-2 {
    background-position-y: -48px;
}

.stars.s-3 {
    background-position-y: -32px;
}

.stars.s-4 {
    background-position-y: -16px;
}

/* DAYS */

.days {
    background: url("../img/icon/days-48x48.3c886eba2b43.png") no-repeat top left;
}

.icon-24.days {
    background-size: auto 24px;
}

.icon-32.days {
    background-size: auto 32px;
}

.days.d0 {
    background-position-x: 0.0%;
}

.days.d1 {
    background-position-x: 33.3333333333%;
}

.days.d2 {
    background-position-x: 66.6666666667%;
}

.days.d3 {
    background-position-x: 100.0%;
}

.stars-vertical {
    width: 8px;
    height: 28px;
    background: url("../img/icon/5-stars-x32-vertical.658414bea090.png") no-repeat top left;
    background-size: 40px 28px;
}

.stars-vertical.s-2 {
    background-position-x: -8px;
}

.stars-vertical.s-3 {
    background-position-x: -16px;
}

.stars-vertical.s-4 {
    background-position-x: -24px;
}

.avatar-icon {
    min-width: 64px;
    min-height: 64px;
}

.icon-16.coin-perspective {
    background: url("../img/icon/coin_persp.510681c32643.png") no-repeat top left;
    background-size: 16px 16px;
}

.mastery-level {
    background: url("../img/icon/mastery-level.89b243129675.png") no-repeat top left;
    background-position-x: 0;
    background-position-y: 0;
}

.mastery-level.icon-128 {
    background-size: 128px 6528px;
}

.mastery-level.icon-24 {
    background-size: 24px 1224px;
}

.mastery-level.icon-16 {
    background-size: 16px 816px;
}

.mastery-level.level-1 {
    background-position-y: calc(1% / 0.50);
}

.mastery-level.level-2 {
    background-position-y: calc(2% / 0.50);
}

.mastery-level.level-3 {
    background-position-y: calc(3% / 0.50);
}

.mastery-level.level-4 {
    background-position-y: calc(4% / 0.50);
}

.mastery-level.level-5 {
    background-position-y: calc(5% / 0.50);
}

.mastery-level.level-6 {
    background-position-y: calc(6% / 0.50);
}

.mastery-level.level-7 {
    background-position-y: calc(7% / 0.50);
}

.mastery-level.level-8 {
    background-position-y: calc(8% / 0.50);
}

.mastery-level.level-9 {
    background-position-y: calc(9% / 0.50);
}

.mastery-level.level-10 {
    background-position-y: calc(10% / 0.50);
}

.mastery-level.level-11 {
    background-position-y: calc(11% / 0.50);
}

.mastery-level.level-12 {
    background-position-y: calc(12% / 0.50);
}

.mastery-level.level-13 {
    background-position-y: calc(13% / 0.50);
}

.mastery-level.level-14 {
    background-position-y: calc(14% / 0.50);
}

.mastery-level.level-15 {
    background-position-y: calc(15% / 0.50);
}

.mastery-level.level-16 {
    background-position-y: calc(16% / 0.50);
}

.mastery-level.level-17 {
    background-position-y: calc(17% / 0.50);
}

.mastery-level.level-18 {
    background-position-y: calc(18% / 0.50);
}

.mastery-level.level-19 {
    background-position-y: calc(19% / 0.50);
}

.mastery-level.level-20 {
    background-position-y: calc(20% / 0.50);
}

.mastery-level.level-21 {
    background-position-y: calc(21% / 0.50);
}

.mastery-level.level-22 {
    background-position-y: calc(22% / 0.50);
}

.mastery-level.level-23 {
    background-position-y: calc(23% / 0.50);
}

.mastery-level.level-24 {
    background-position-y: calc(24% / 0.50);
}

.mastery-level.level-25 {
    background-position-y: calc(25% / 0.50);
}

.mastery-level.level-26 {
    background-position-y: calc(26% / 0.50);
}

.mastery-level.level-27 {
    background-position-y: calc(27% / 0.50);
}

.mastery-level.level-28 {
    background-position-y: calc(28% / 0.50);
}

.mastery-level.level-29 {
    background-position-y: calc(29% / 0.50);
}

.mastery-level.level-30 {
    background-position-y: calc(30% / 0.50);
}

.mastery-level.level-31 {
    background-position-y: calc(31% / 0.50);
}

.mastery-level.level-32 {
    background-position-y: calc(32% / 0.50);
}

.mastery-level.level-33 {
    background-position-y: calc(33% / 0.50);
}

.mastery-level.level-34 {
    background-position-y: calc(34% / 0.50);
}

.mastery-level.level-35 {
    background-position-y: calc(35% / 0.50);
}

.mastery-level.level-36 {
    background-position-y: calc(36% / 0.50);
}

.mastery-level.level-37 {
    background-position-y: calc(37% / 0.50);
}

.mastery-level.level-38 {
    background-position-y: calc(38% / 0.50);
}

.mastery-level.level-39 {
    background-position-y: calc(39% / 0.50);
}

.mastery-level.level-40 {
    background-position-y: calc(40% / 0.50);
}

.mastery-level.level-41 {
    background-position-y: calc(41% / 0.50);
}

.mastery-level.level-42 {
    background-position-y: calc(42% / 0.50);
}

.mastery-level.level-43 {
    background-position-y: calc(43% / 0.50);
}

.mastery-level.level-44 {
    background-position-y: calc(44% / 0.50);
}

.mastery-level.level-45 {
    background-position-y: calc(45% / 0.50);
}

.mastery-level.level-46 {
    background-position-y: calc(46% / 0.50);
}

.mastery-level.level-47 {
    background-position-y: calc(47% / 0.50);
}

.mastery-level.level-48 {
    background-position-y: calc(48% / 0.50);
}

.mastery-level.level-49 {
    background-position-y: calc(49% / 0.50);
}

.mastery-level.level-50 {
    background-position-y: calc(50% / 0.50);
}

.pm-generic {
    background: url("../img/icon/pm-9_to_9-64x64.df3aca27907e.png") no-repeat top left;
    background-position-x: 0;
    background-position-y: 0;
}

.pm-generic.icon-16 {
    background-size: 32px 320px;
}

.pm-generic._pmg-9 {
    background-position-y: calc(0% / 0.19);
}

.pm-generic._pmg-8 {
    background-position-y: calc(1% / 0.19);
}

.pm-generic._pmg-7 {
    background-position-y: calc(2% / 0.19);
}

.pm-generic._pmg-6 {
    background-position-y: calc(3% / 0.19);
}

.pm-generic._pmg-5 {
    background-position-y: calc(4% / 0.19);
}

.pm-generic._pmg-4 {
    background-position-y: calc(5% / 0.19);
}

.pm-generic._pmg-3 {
    background-position-y: calc(6% / 0.19);
}

.pm-generic._pmg-2 {
    background-position-y: calc(7% / 0.19);
}

.pm-generic._pmg-1 {
    background-position-y: calc(8% / 0.19);
}

.pm-generic._pmg0 {
    background-position-y: calc(9% / 0.19);
}

.pm-generic._pmg1 {
    background-position-y: calc(10% / 0.19);
}

.pm-generic._pmg2 {
    background-position-y: calc(11% / 0.19);
}

.pm-generic._pmg3 {
    background-position-y: calc(12% / 0.19);
}

.pm-generic._pmg4 {
    background-position-y: calc(13% / 0.19);
}

.pm-generic._pmg5 {
    background-position-y: calc(14% / 0.19);
}

.pm-generic._pmg6 {
    background-position-y: calc(15% / 0.19);
}

.pm-generic._pmg7 {
    background-position-y: calc(16% / 0.19);
}

.pm-generic._pmg8 {
    background-position-y: calc(17% / 0.19);
}

.pm-generic._pmg9 {
    background-position-y: calc(18% / 0.19);
}

.pm-generic._pmg-none {
    background-position-y: calc(19% / 0.19);
}

.pm-generic._used {
    background-position-x: 100%;
}